首页 > Web开发 > 详细

webpack学习(一)

时间:2017-09-12 23:42:37      阅读:189      评论:0      收藏:0      [点我收藏+]

1.首先建立一个webpack项目,然后新建文件demo2,在demo2下新建src文件,index.html文件,初始化项目 (npm init --yes)得到package.json

2.全局安装webpack (npm install webpack -g),在项目文件下本地安装webpack(npm install webpack --save--dev),

3.在src下面新建js文件,分别创建两个js文件main.js和index.js 如下图所示:

技术分享技术分享技术分享

4.在demo2下创建webpack.dev.config.js配置文件,注意此时的入口文件有index.js,main.js两个,要生成动态的index.html文件(即自动引入index.js和main.js). 需要引入html-webpack-plugin插件,通过npm install html-webpack-plugin --save--dev 下载,具体代码如下图所示:

技术分享

entry:表示入口文件  output:表示输出文件  path表示路径  __dirname表示当前webpack.dev.config.js的绝对路径。filename表示文件名称.filename支持4种动态起名字的方式( id, name, hash, chunkhash )

5.将package.json里面的scirpt键对应的值改为:

{

"d" : "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons"

},

  如下图所示:

技术分享

6.执行npm run d 可得如下结果:

技术分享

index.html自动引入输出的两个js文件:

技术分享

在浏览器打开便看到引入的js文件产生的效果。

webpack学习(一)

原文:http://www.cnblogs.com/homeStrong/p/7512791.html

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