首页 > Web开发 > 详细

Webpack入门教程十八

时间:2017-02-20 23:34:02      阅读:264      评论:0      收藏:0      [点我收藏+]

91.webpack.config.js文件中entry的三种使用方式一字符串形式

/*
    webpack.config.js中的内容如下
*/
module.exports = {
	entry:‘./src/script/main.js‘,
	output:{
		path:‘./dist/js‘,
		filename:‘bundle.js‘
	}
}

92.项目目录结构如下

技术分享

93.index.html文件内容如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>webpack demo</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

94.main.js文件内容如下

function helloWorld(){}

95.package.json文件内容如下

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1"
  }
}

96.在命令行运行cnpm run webpack命令

cnpm run webpack

技术分享

97.查看dist/js/bundle.js文件是否存在,如果生成bundle.js文件表示配置成功


本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1899482

Webpack入门教程十八

原文:http://suyanzhu.blog.51cto.com/8050189/1899482

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!