webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发

前言

• 开发学习中的代码已经上传到GitHub，GitHub传送门https://github.com/fengfanli/learn_vue在其中的 ./day05_webpack使用和配置/01-webpack的使用目录下
• 其他博客如下：

1. webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。
2. webpack学习二：webpack初始用打包，webpack初始用配置文件打包，webpack安装对应的loader
3. webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。
4. webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
5. webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境和生产环境

继续沿用上一个案例的项目，复制一份儿，改名为：05-webpack的Plugin
最后的项目结构如下所示：

一、plugin是什么？

• plugin是什么？

1. plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
2. webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

• loader和plugin区别

1. loader主要用于转换某些类型的模块，它是一个转换器。
2. plugin是插件，它是对webpack本身的扩展，是一个扩展器。

• plugin的使用过程：

1. 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
2. 步骤二：在webpack.config.js中的plugins中配置插件。

• 下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

二、添加版权的Plugin：BannerPlugin

• 我们先来使用一个最简单的插件，为打包的文件添加版权声明
  该插件名字叫BannerPlugin，属于webpack自带的插件。
• 按照下面的方式来修改webpack.config.js的文件：
  

重新打包程序，执行打包npm run build命令后：查看bundle.js文件的头部，看到如下信息

三、打包html的plugin：html-webpack-plugin

• 目前，我们的index.html文件是存放在项目的根目录下的。

1. 我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
2. 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用 html-webpack-plugin 插件

• html-webpack-plugin 插件可以为我们做这些事情：

1. 自动生成一个index.html文件(可以指定模板来生成)
2. 将打包的js文件，自动通过script标签插入到body中

• 安装 html-webpack-plugin 插件```
  npm install html-webpack-plugin@3.2.0 --save-dev

  ```

• 使用插件，修改webpack.config.js文件中plugins部分的内容如下：
  

1. 这里的 template 表示根据什么模板来生成 index.html
2. 另外，我们需要删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有路径问题。

• 执行打包npm run build命令后，打包后的dist目录下有了index.html，内容如下：

四、js压缩的Plugin：uglifyjs-webpack-plugin

• 在项目发布之前，我们必然需要对js等文件进行压缩处理

1. 这里，我们就对打包的js文件进行压缩
2. 我们使用一个第三方的插件 uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件，使用插件：

执行打包npm run build命令后，查看打包后的bunlde.js文件，是已经被压缩过了。

五、搭建本地服务器的plugin：webpack-dev-server

• webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

• 不过它是一个单独的模块，在webpack中使用之前需要先安装它```
  npm install webpack-dev-server@2.9.3 --save-dev

  ```

• devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

1. `contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
2. port：端口号
3. inline：页面实时刷新
4. historyApiFallback：在SPA页面中，依赖HTML5的history模式

• webpack.config.js文件配置修改如下：
  
• 我们可以再配置另外一个scripts：
  –open参数表示直接打开浏览器
  
  这样再终端执行命令：npm run dev ，便可以自动打开浏览器并显示内容了

六、到目前为止webpack.config.js全部内容

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // __dirname: 当前文件的目录
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                /*
                * 使用多个 loader时，从右往左执行
                * css-loader : 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
                * style-loader: 将模块的导出作为样式添加到 DOM 中
                * */
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },
            {
                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
                }]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载的图片，小于 limit 时，会将图片编译成 base64字符串形式
                            // 当加载的图片，大于 limit 时，会使用 file-loader 模块进行加载
                            limit: 8192,
                            // 这个 name 配置  可以在 file-loader 的官网中看到
                            /*
                            * img 文件夹
                            * [name] 传过来的图片名称
                            * [hash:8] 哈希值取前8位
                            * [ext] 带上ext
                            * */
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                // 排除 一些包
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        // import 文件时，可以不写后缀，在这里配置，但是我这里不写配置不写后缀也可以成功。
        extensions: ['.js', '.css', '.vue'],
        // alias： 别名， $：以vue为结尾的
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归冯安晨所有！！！'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new uglifyJsPlugin()
    ],
    devServer: {
        contentBase: './dist',
        inline: true
    }
}