webpack学习

1.初始化

1.npm init -y 初始化package.json

2.npm i webpack webpack-cli 安装依赖

3.创建webpack.config.js配置文件

4.配置入口文件，打包出口文件。

5.新建脚本，执行命令npm run build

6.配置出口文件，改变文件名

2. html-webpack-plugin插件

功能：它的主要功能是根据指定的模板生成HTML文件，并将Webpack打包后的输出文件自动引入到生成的HTML文件中。

通俗的说就是自动引入js文件到模板中。

1.安装插件npm i html-webpack-plugin

2.配置webpack.config.js的plugins配置项

template配置项设置模板的路径。
filename设置打包后的文件名。

这样打包的时候，js文件会自动导入模板中。方便。

3.webpack-dev-server（浏览器编译实时预览）

每次修改代码都需要打包代码才能得到最新的页面，所以较为麻烦。那么如何解决呢？

这就要使用webpack-dev-server
注意：webpack-dev-server打包的dist是保存在内存中的。

1.安装插件npm i webpack-dev-server

2.配置devServer

port是端口号；
static是静态资源文件。浏览器打开默认是找（index.html）

3.脚本配置

4.编译es6代码

1.安装

2.创建.babelrc

3.配置规则module

include是要处理的文件。
exclude是不要处理的文件。

loader一个loader时不使用数组。
多个loader，使用数组来完成。