loaders、plugins、mode

一、Loaders

webpack默认是只支持JS和JSON两种格式的数据，对于其他类型的数据，webpack不能解析，loaders的作用就是将这些代码解析成webpack能识别的代码，并添加到依赖图中。

Loaders本身是一个函数，参数是源文件，输出解析之后的文件。

基础配置如下：

const path = require("path");
module.exports = {  
     mode: "development",  
     entry: "./src/index.js",  
     output: {    
        path: path.join(__dirname, "dist"),    
        filename: "bundle.js", 
     },  
     module: {    
        rules: [      
         {        
             test: /\.less$/,        
             use: ["style-loader", "css-loader", "less-loader"],
         },
       ], 
   },
};

• rules为一个数组，所以可以写多个文件的解析规则。

• 这里解析less文件，use中的less-loader是将less代码解析成css代码，css-loader解析css，style-loader是将解析后的css代码以style标签的形式插入到head中。

二、Plugins

loaders是用来处理webpack不能处理的文件的，plugins是用于增强webpack的，它的作用有文件优化、资源管理、环境变量注入等。

它作用于整个构建过程。

基础配置如下：

const path = require("path");const HtmlWebpacPlugins = reques("html-webpack-plugin");module.exports = {  mode: "development",  entry: "./src/index.js",  output: {    path: path.join(__dirname, "dist"),    filename: "bundle.js",  },  module: {    rule: [      {        test: /\.less$/,        use: ["style-loader", "css-loader", "less-loader"],      },    ],  },  plugins: [new HtmlWebpacPlugin({ template: "./src/index.html" })],};

只需要实例化一个plugin，并放入plugins数组就可以了。

常用的plugin有：

• CommonsChunkPlugin：将chunks相同的模块代码提取成公共js。

• CleanWebpackPlugin：清理构建目录。

• ExtractTextWebpackPlugin：将css提取成一个单独的文件。同mini-css-extract-plugin作用一样。

• CopyWebpackPlugin：将文件或者文件夹拷贝到输出文件夹下。

• HtmlWebpackPlugin：创建Html文件去承载输出的bundle.js。

• UglifyjsWebpackPlugin：压缩js。

• ZipWebpackPlugin：将打包出的资源生成一个zip包。

三、mode

mode是用来指定当前的构建环境的，参数有：production、development、none。

如果设置为production，那么会开启webpack的一个生产环境的内置函数，优化代码。

如果是none，就不做任何的优化。