webpack中webpack.config.js === Plugins

plugins：

plugins： 扩展 webpack 本身的一些功能，
它们会运行在各种模块解析完成以后的打包编译阶段，
比如对解析后的模块文件进行压缩等
（通俗点说就是他是用来扩展webpack本身的）

loaders：loader是文件加载器，能够加载资源文件，
并对这些文件进行一些处理，诸如编译、压缩等，
最终一起打包到指定的文件中
（通俗点说就是用来转换器 eg：将A.scss转换为A.css）

注意：版本问题
比如：

plugins：

html-webpack-plugin ： 他会在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

1. 安装

    命令 npm install --save-dev html-webpack-plugin
   

2. 在webpack.config.js文件中配置

//第一步先引入
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports={
    mode:'production',
    entry: './src/index.js',
    //第二步 设置它
    plugins: [
        new HtmlWebpackPlugin({
        //这给title是在浏览器上的名字 请看下图
          title: "My App",
          //打包后文件的名字
          filename: "app.html",
          //打包文件原来的路径
          template: "./public/index.html"
        })
     ]
  
}

把上面代码块中的title打印出来

<title><%=htmlWebpackPlugin.options.title%></title>

效果图

3. 打包
   打包完后会在dist中出现一个app.html
   如下图
   

clean-webpack-plugin：他会在打包之前把之前打包的文件给删除掉

1. 安装

    npm install --save-dev clean-webpack-plugin
   

2. 在webpack.config.js中配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports={

    mode:'production',
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
          title: "My App",
          //打包后文件的名字
          filename: "app.html",
          //打包文件原来的路径
          template: "./public/index.html"
        }) ,
        
        new CleanWebpackPlugin(),
     ],

}

看下图解释

mini-css-extract-plugin 他相当与把loader中的style-loader给代替了

1. 安装 ：mini-css-extract-plugin

   npm install --save-dev mini-css-extract-plugin
   

   安装：css

   npm install css-loader
   

2. 创建css文件
   

3. 在webpack.config.js中配置

//配置文件
const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={

    mode:'production',
    entry: './src/index.js',
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:[
                //从后往前执行的  先执行的是css-loader 再执行的MiniCssExtractPlugin.loader
                    {loader: MiniCssExtractPlugin.loader},
                    {loader:'css-loader'},
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: "My App",
          //打包后文件的名字
          filename: "app.html",
          //打包文件原来的路径
          template: "./public/index.html"
        }) ,
        // new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            // 打包到文件中的路径
            filename: './public/css/app.css'
        }),
     ],
}

如有不懂看下图解释

WebpackDevServer ：每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，WebpackDevServer 可以改善这个问题

• 他的作用在于可以通过刷新页面来把你修改的东西给显示出来

1. 先安装 WebpackDevServer

    npm install --save-dev webpack-dev-server
   

2. 因为他是一个服务得去启动所以为了方便我们去package.json中配置一下

  "scripts": {
    "server": "webpack server"
  },

3. 再去webpack.config.js文件中配置

     devServer: {
        // 生成的虚拟目录路径
        contentBase: "./dist",
        //他会在http://localhost:8080/app.html，也加上打开页面的名字
        openPage:'app.html',
        //自动打开时所在的页面
        index:'app.html',
        // 自动开启浏览器
        open: true,
        //开启热更新（数据实时更新不用重新在输入命令开一遍 刷新就可以更新你）
        hot:true,
        // //即使HNR（热更新）不生效，也可以不刷新整个页面（选择开启）
        // hotOnly:true,
        // 端口
        port: 8080
      }

4. 启动

    命令 ：npm  run server
   

5. 启动之后他会自动给你弹出一个页面如下图
   

• 提示：启动服务以后，webpack 不在会把打包后的文件生成到硬盘真实目录中了，而是直接存在了内存中(同时虚拟了一个存放目录路径)，后期更新编译打包和访问速度大大提升

sourceMap

• webpack大包所生成的代码并不利于我们的调试和错误定位（因为他是再一行的），我们可以通过 sourceMap 来解决这个问题

1. 首先他编译后会为每一个编译文件（除html文件）生成一个对应的 .map 文件，同时在编译文件中添加一段对应的 map 文件引入代码

//# sourceMappingURL=xx.js.map

如图

2. 使用他只需要在webpack.config.js 配置devtool: ‘source-map’,即可使用

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  ...
}

你会发现你的map文件中是这样的

总结：
plugins：就是用来对webpack本身进行扩展的