webpack4+（打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩）

（1）打包后的文件分析

　　首先将打包后的文件进行适当删减，Ctrl+Shift+L可以同时选中所有相同结构内容

　　结构如下

(function(modules){
   ... 
})(
 {
   ...
 }   
)

　　分析可知本质为匿名函数即IIFE函数，执行时会传入后面函数执行符里的对象，接下来分析下传入对象

对象构成：
　　key指的是当前模块路径
　　value指的是匿名函数

　　然后将对象传入IIFE的modules参数

　　接下来分析下webpack启动函数即IIFE函数

 　　接下来开始配置函数，实现require方法，因为require默认不能在浏览器运行，方法如下所示

 　　接下来看下方法什么时候被调用？

 　　该方法会调用index.js入口模块，名字传入后，便变成了参数moduleId

　　接着分析函数内部

（2）配置文件更改名字+脚本script配置，命令打包

　　如果配置文件更改名字，则在打包时，可以通过--config来指定打包文件

 　　如果我们想快速通过类似npm start指令快速打包，则可以配置package.json项目说明文件

　　通过命令打包

npm run build

　　此外，通过命令打包也可以动态传参，如下所示

 　　这里注意：需要加两次-- --，因为只加一个--时，webpack不会将其识别为参数，--后面加动态参数--config webpack.conf.js

　　如果想加上进度条，则可以添加--progress，如下所示

（3）HTML插件+指令预览npm run dev

　　目前虽然打包出来了js文件，且可以在index.html引入使用，如下所示

 　　但此时需要手动打开，且协议为file文件协议

 　　日常开发，更希望以服务器方式打开运行访问。此时便需要起一个服务，webpack内置了一个开发服务，通过express搭建，从而实现静态服务(类似于live-server)。

　　首先安装开发依赖，如下所示

npm i webpack-dev-server -D

　　下载完成后打包运行，指令如下

npx webpack-dev-server

　　好处，并不会真实去打包文件，只是生成了所谓的内存中的打包，可以将文件写入内存里。接下来访问localhost:8080端口，如下所示

　　会以当前项目为主，展示文档结构，点进dist后，便可查看到index.html内容。

　　接下来通过指令启动服务预览，如下所示

　　接下来通过指令启动

　　当然，也可以自定义如下，接下来进行开发服务器配置。

　　或者如下所示

webpack-dev-server 
--port 3333 端口号
--content-base ./dist --progress 默认打开目录
--open 浏览器自动打开

　　此时便可以直接访问loaclhost:3333端口，如下所示

　　或者如下所示，直接在配置文件配置

　　但此时还有问题，即这里的index.html是我们手动创建的，所以接下来接着配置，自动创建html文件。这里便需要借助插件html-webpack-plugin.

　　首先安装依赖，如下所示

>npm i html-webpack-plugin -D

　　新建模板文件src/index.html

　　然后在配置文件引入使用

　　接下来进行打包输出，如下所示

　　查看生成的index.html文件

　　当代码部署上线时，需要更改mode模式，改为生产模式，进行代码压缩。如下所示

　　此时查看打包输出文件bundle.js，如下所示，已经进行了压缩丑化

　　但此时html文件仍然未被压缩，所以接下来进行相关配置，压缩html文件。

　　1、首先删除html文件里的双引号

　　2、将代码合并为一行，即折行操作

　　index.html如下所示，可以分步骤进行测试（content属性里有逗号，所以没有去掉双引号）

　　打包后如下所示

　　此外，也可以给bundle.js添加hash值，每次生成新文件，避免覆盖之前文件，如下所示

　　打包后文件如下所示

　　此时打包便会生成新文件，防止文件覆盖带来的缓存问题 

接下来开始其他配置，例如如何支持CSS模块、JS模块的转换、图片、各项的优化等

（3）样式处理

　　为了调试方便，我们接着把mode形式改为development开发模式

 　　目前webpack配置文件大致如下

　　1、分析

正如之前所介绍，webpack默认只支持js模块

　　首先新建src/index.css样式文件，坐下测试

 　　然后在源文件src目录下的静态木板文件引入

　　接下来打包输出测试下

此时发现index.css并没有完成打包，所以不能直接引入CSS样式文件.

　　接下来我们希望将css文件变成模块引入，然后再进行打包，如下所示

　　接下来进行打包，如下所示

 　　翻译如下：

当前需要合适的loader去解析文件.而loader的作用便是将源代码进行转化，接下来编写配置模块module

　　如下所示，首先编写静态文件demo.css并引入

　　然后入口文件引入

　　接着配置文件

注意：
    1、多个loader需要用[]
    2、css-loader作用是接续@import语法，即连接css文件之间的引用
    3、style-loader作用是将css代码插入到head标签里
    4、loader特点：作用单一性
    5、loader执行顺序，默认从右到左执行，从下到上执行
    6、loader可以写成对象格式，以便加入option参数

　　测试如下

　　例如在模板文件里将style合并为一个

（5）处理Less文件

　　为了方便测试，首先在模板html插入点内容

 　　然后开始编写less文件

 　　然后在入口文件引入

　　接着编写配置文件

注意：
    因为webpack的module模块的rules规则匹配是从下到上、从右到左，所以需要在最底部加个less-loader

 　　同样，除了less，还有sass（安装node-sass、sass-loader）、stylus（stylus、stylus-loader）等预处理器。接下来安装less-loader依赖

npm install --save-dev less-loader less

　　接着打包文件，然后进行预览测试，如下所示

 （6）样式处理升级--抽离CSS样式

　　目前为止，样式都是放在style标签里，样式过多容易造成阻塞，所以我们将css抽离出去，用link标签引入。这里便需要用到第三方插件mini-css-extract-plugin

npm i mini-css-extract-plugin -D（译为：提取最小单位css插件）

　　接着将style-loader配置改为MiniCssExtractPlugin.loader

 　　接下来进行打包测试

 　　打包完成后发现目录下多出main.css文件，此时样式文件便已经抽离出来

（7）css属性--自动加浏览器兼容前缀

　　如下所示，我们给h2添加旋转属性

　　接下来打包预览，虽然可以正常使用，但浏览器没有加兼容前缀

　　如果想自定添加浏览器前缀，需要涉及到第三方依赖“autoprefixer”译为“自动前缀”，但该依赖需要结合loader使用，所以还需要添加postcss--loader依赖.

npm i autoprefixer postcss-loader -D

　　下载完成后首先配置loader，即postcss-loader，因为是在解析css前添加前缀，所以我们将该loader调用放到css-loadder之前，如下所示

　　接下来进行打包测试

　　缺少配置文件，所以接下来在根目录下新建对应的配置文件postcss.config.js

这里注意：
    require()()后跟的参数限制浏览器版本，除了在这里限制，也可以直接在package.json里限制

 　　此时再次打包查看，审查打包后的css文件，发现此时前缀添加成功

（8）优化压缩css打包的文件

　　如果想优化压缩打包后的css文件，需要用到mini-css-extract-plugin，搜索npm.js官网，查看具体用法

 　　文档表明，需要添加优化项optimization，在里面配置压缩。默认情况下调用TerserJSPlugin，压缩JS代码。而OptimizeCSSAssetsPlugin为压缩css.

　　首先下载optimize-css-assets-webpack-plugin依赖

npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D

 　　此时再次打包，结果如下，此时css和js均已打包压缩

{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }