webpack-loader&plugins&mode

loader

  webpack中的loader是一个预处理器，将非js类型的文件转换为 webpack 能够处理的有效模块。
  本篇主要介绍如何在webpack.config.js中进行配置。

const config = {
    module: {
        rules: [
          { test: /\.(css|less|sass)$/, loader: 'css-loader' },
          { 
              test: /\.html$/,
              use: [
                  // 多个loader的情况
                  "htmllint-loader",
                  {
                    loader: "html-loader",
                    options: { /* ... */ }
                  }
               ]
           }
        ]
      }
}

项目中常用的loader有：
file-loader ：将文件发送至输出文件，并返回相对路径。
url-loader：类似于file-loader，但是如果文件小于限制，返回data url
style-loader：将module.exports作为样式添加到DOM上
css-loader：返回css code
less-loader：加载并编译less文件
sass-loader：加载并编译sass文件
babel-loader：加载ES2015+代码并用babel转译为ES5

plugins

plugins存在的目的在于解决loader无法实现的其他事情。是一个数组。

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    plugins: [
        //webpack3：提取多个入口chunk的公共模块，webpack4中移除
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor', 'manifest']
        }),
        // 提取自定义的css
        extractCSS = new ExtractTextPlugin('[name].css');
    ]
}

mode

mode是webpack4中新增的参数，有两个取值：

• mode: production
  默认提供可能的优化功能，如代码压缩，不需要再定义process.env.NODE_ENV的值

// webpack 2/3 
module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        //作用域提升
        new webpack.optimize.ModuleConcatenationPlugin(),
        //出错时只打印错误信息不重新加载页面
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

 // webpack 4  
 module.exports = {
    mode: 'production'
 }

• mode: development

// webpack 2/3 
module.export = {
     plugins: [
        //热更新时返回文件名
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
}
// webpack 4  
 module.exports = {
    mode: 'development'
 }