webpack——在项目中搭建自己的webpack（不用官方的自动配置）（一）

1、webpack基本使用举例：隔行变色

其中第四步初始化首页index.html：

第六步后的操作：

在src中新建一个index.js，将所有功能都放到这个里面，且基于index.html来导入index.js

接下来操作index.js:

导入jQuery且写jQuery实现奇偶行变色

接下来会报错（import那里），原因是ES6存在兼容性问题，解决：引入webpack（能解决兼容性）

2、在项目中配置webpack以实现隔行变色

第五步执行完后会生成一个dist——>main.js目录，是webpack自己生成的，这时要在index.html中改变src

3、配置打包的入口和出口

（1）在此期间Webpack做了什么：默认将index.js打包成main.js，以便兼容

文件目录如下：

（2）手动指定webpack入口和出口文件：

其中__dirname表示当前文件所处的根目录

执行npm run dev 将webpack跑起来，看看里面有没有上面的配置信息

结果是：在dist目录下确实有了bundle.js文件

接下来在index.html中引入bundle.js(这时main.js无用啦，因为输出文件改成了bundle.js)

4、配置webpack的自动打包功能

自动打包的原因：每次修改代码都要执行npm run dev才能实现打包，才能展现在页面上

注意：

（bundle.js是虚拟的）

5、配置生成预览页面

将src下的index.html复制放到根目录下：因为只要根目录下有html，则打开就会显示。如何复制：

Template：代表要复制的模板文件

Filename:生成新文件