webpack4系列第一发

webpack4的改动其实挺大，但破坏性更新不算太多，称得上破坏性更新的恐怕只有 CommonChunkPlugin 的移除了。

和 webpack2 或者 webpack3 一样，你将很容易写出这样的配置。

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

module.exports = {
  entry: './src/main.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    pathname: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: '你好，webpack4'，
      template: './index.html'
    })
  ],

  devServer: {
    proxy: {
      '/apis': {
        target: 'https://m.mock.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
    }
  }
}

这里需要留意的是，loader 是用来帮助 webpack 来打包非 js 文件的，在 use 中执行顺序是从右到左。

{
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}

所以先执行 less-loader 再执行 postcss-loader ，css-loader，style-loader 。
less-loader 好理解，就是专门处理 .less 文件的
postcss-loader 是接管 less-loader 处理后的文件
css-loader 解析 css 文件，主要处理 css 引入的 import 和 url
style-loader 因为 css 被打入到 js 文件中，所以需要动态创建 style 来进行样式引入

但并保证是从上到下的，loader 的执行顺序如下: 前置 -> 行内 -> 普通 -> 后置。所以可以在某些模块上增加 前置 标识。

{
  enforce: 'pre', // 指定为前置类型
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "eslint-loader",
}

还有一点需要注意的是：
derServer 的 proxy 借用了 http-proxy-middleware 模块来实现。

具体配置释义在这片博文中：proxy的配置

webpack4系列第一发

猜你喜欢