webpack4 零配置了解一下

[muwoo]

webpack4 最主要的卖点便是 0 配置，话不多说，让我们从头开始体验 webpack 4 的一些特性。

entry 和 output

首先创建一个空目录，然后初始化一些配置：

mkdir webpack4-quickstart
cd  webpack4-quickstart
npm init -y

接着，我们需要安装webpack的相关依赖：

npm i webpack --save-dev
npm i webpack-cli --save-dev

• webpack： 即 webpack 核心库。它提供了很多 API, 通过 Node.js 脚本中 require('webpack') 的方式来使用 webpack。
• webpack-cli：是 webpack 的命令行工具。webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始 webpack 包本身不再集成 cli。

现在，在package.json中添加一下构建命令：

"scripts": {
  "build": "webpack"
}

让我们来运行一下：

npm run build

然后我们就看到了这样的错误：

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack4-quickstart'

这是因为webpack4因为没有webpack.config这样的配置文件指定entry，会把./src/index.js作为默认的入口文件。所以我们可以来简单创建一下：

// ./src/index.js
console.log(`I'm a silly entry point`);

然后再次运行：

npm run build

然后发现我们在目录下面生成出了一个这样的一个文件./dist/main.js，这也是因为webpack4会默认指定./dist/main.js作为其输出目录。

production 和 development 模式

在webpack 4 以前，拥有2份配置文件是webpack项目常见的情况，一个常规的项目配置可能是这样的：

• 一份开发环境的配置，用来配置 dev server 和其他的一些东西
• 一份生产环境的配置，配置一些 UglifyJSPlugin、sourcemaps 等等

但是在webpack 4中，我们可以通过设置命令行参数production和development来区分环境：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

让我们运行：

npm run dev

再来看看 ./dist/main.js发现mian.js并没有被压缩了。再试试

npm run build

结果时一个已经被压缩的js。webpack 4另一个新的特性就是mode。可以通过--mode标识开使用。

• Production mode 可以实现各种优化，包括 代码压缩、tree-shaking...
• Development mode 则是在速度上进行了优化，只不过不会提供压缩功能。

覆盖默认的 entry/output

在webpack 4中我们可以通过下面的方式来覆盖默认的 entry/output

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

使用 Babel 转译 ES6

webpack 在没有 babel-loader 的情况下，是没办法进行 ES6 转译的。将 ES6 转成 ES5 语法，我们需要这些依赖：

• babel-core
• babel-loader
• babel-preset-env 编译 ES6 -> ES5

让我们来安装他们：

npm i babel-core babel-loader babel-preset-env --save-dev

下一步是通过 .babelrc来声明编译使用的转换器：

{
    "presets": [
        "env"
    ]
}

在这里我们有2种方式来配置babel-loader:

• 使用一个 webpack.config.js 来配置
• npm script 中，使用 --module-bind参数

我们知道webpack 4是0配置的，为什么我们还需要去写这些配置工具能？关于 webpack4 0 配置适用于：

• entry. 默认 ./src/index.js
• output. 默认 ./dist/main.js
• production 和 development mode (不需要创建2份配置文件)

额，也就是这些，所以说如果你需要使用loader，那么你还是需要创建一个webpack 配置文件😊。关于有没有可能将 loader 也加入到0配置中去。Sean 有这样的一段回答：

For the future (after v4, maybe 4.x or 5.0), we have already started the exploration of how a preset or addon system will help define this. What we don’t want: To try and shove a bunch of things into core as defaults What we do want: Allow other to extend

简单的来说，就是在后续系统中会开始探索这一点，但是不会无脑的把什么东西都加入到0配置中去，需要保持其高度的可扩展性。所以我们还是乖乖地先配置我们的webpack.config,js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

这里就不必再定义 entry 和 output 了。
上面说的另一种方式就是通过 --module-bind来定义 loader：

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  }

不太推荐这种方式，这样会使 script内容变得臃肿。

[cmyh100]

webpack的4.26.0 这个版本有一次提交，它内置terser-webpack-plugin已经默认支持ES6转译