扶着你玩转webpack4——基础配置

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

首先我们初始化项目

yarn init

然后我们安装我们需要的模块。在 webpack4 中，我们需要多安装一个 webpack-cli

yarn add webpack webpack-cli webpack-dev-server

在项目的根目录中创建一个 webpack.config.js 的文件。
和 webpack2 或者 webpack3 一样，你将很容易写出这样的配置。

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

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

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[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': ''
        }
      }
    }
  }
}

但是需要注意的是，webpack4 标榜的是零配置，但是我们知道前端开发环境一般有 development 和 production ，甚至有更多，比如 test 等。所以我们需要指定我们的环境。

module.exports = {
	mode: 'development'
}

接着我们在 package.json 中添加脚本命令，如果我们根目录的文件名不是 webpack.config.js ，那么需要指定文件。

"scripts": {
   "dev": "webpack-dev-server"
 }

这里多说一下，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的配置