webpack学习（一）

墨蓝 2023-08-17 16:46 71阅读 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 如下图所示： ###

![1216631-20170912223517391-107149696.png][]![1216631-20170912223853063-1645623793.png][]![1216631-20170912224117235-1315863653.png][]

### 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 下载，具体代码如下图所示： ###

![1216631-20170912225229125-403402240.png][]

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" ###

### \}, ###

###   如下图所示： ###

![1216631-20170912230007953-216330742.png][]

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

### ![1216631-20170912231205438-1360453865.png][] ###

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

### ![1216631-20170912231353547-439764446.png][] ###

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

转载于:https://www.cnblogs.com/homeStrong/p/7512791.html

[1216631-20170912223517391-107149696.png]: https://images2017.cnblogs.com/blog/1216631/201709/1216631-20170912223517391-107149696.png
[1216631-20170912223853063-1645623793.png]: https://images2017.cnblogs.com/blog/1216631/201709/1216631-20170912223853063-1645623793.png
[1216631-20170912224117235-1315863653.png]: /images/20230809/f8d2d8306db14163a833568c4205884d.png
[1216631-20170912225229125-403402240.png]: /images/20230809/b196a1402c264358b02f903a688c59a7.png
[1216631-20170912230007953-216330742.png]: /images/20230809/f2540e152bcb4f3b861d4ee6ab63782a.png
[1216631-20170912231205438-1360453865.png]: /images/20230809/514731f946e941e7b41b415b66c38706.png
[1216631-20170912231353547-439764446.png]: /images/20230809/64bc4aae1c7f4937a0325bcf390ac2c4.png