【翻译】Webpack 4 教程：从0配置到生产模式

时间 2019-11-06

标签翻译 webpack 教程配置生产模式繁體版

原文原文链接

原文连接：Webpack 4 Tutorial: from 0 Conf to Production Modecss

webpack 4 问世了！html

这个流行的模块打包工具进行了大规模的升级。node

webpack4，有什么更新？大幅度的性能优化，零配置和明智的默认配置。react

webpack 4 ，零配置的模块打包工具

webpack是一个强力和有着不少独特功能的工具，可是他的一大痛点在于他的配置文件webpack

给中大型项目提供一个配置文件不是什么大问题。你甚至没法离开它。然而，对于一些较小型应用来讲就有点麻烦了，尤为是你在心血来潮想开始作一些好玩的app的时候。git

这也是Parcel吸引人的缘由github

如今的好消息是webpack 4 默认不再须要一个配置文件了！web

webpack 4：零配置开始

建立一个目录而后进入npm

mkdir webpack-4-quickstart && cd $_
复制代码

初始化package.json：json

npm init -y
复制代码

安装webpack4：

npm i webpack --save-dev
复制代码

咱们也须要安装另一个包：webpack-cli

npm i webpack-cli --save-dev
复制代码

而后打开package.json添加构建脚本：

"scripts": {
  "build": "webpack"
}
复制代码

关闭保存

试着运行

npm run build
复制代码

而后咱们看到

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart' 复制代码

webpack 4 须要在./src目录下找一个入口文件！若是你不知道这是什么意思，请参考我以前的文章

简要来讲：webpack须要这个入口文件来开始js代码的打包。

在之前的版本里webpack的入口文件须要在配置文件webpack.config.js里指定。

可是如今不用指定了，它会默认选择./src/index.js这个文件。

测试这个新特性很容易，建立一个./src/index.js:

console.log(`I'm a silly entry point`);
复制代码

从新构建：

npm run build
复制代码

你会在~/webpack-4-quickstart/dist/main.js获得你打包后的文件。

什么？等一下。都不须要指定输出文件吗？是的。

在webpack 4 中不须要指定入口和出口文件。

webpack的真正本领是代码拆分。可是相信我，有一个零配置的工具能够加速你的进程。

因此这就是第一个新特性：他会把./src/index.js默认为入口文件，把打包后的文件放在./dist/main.js。

下一章后咱们能看到另外一个有用的特性：生产和开发模式。

Webpack 4:生产和开发模式

在webpack中拥有两份配置文件是常事。

一个典型的项目应该有：

一个开发用的配置文件，用来定义webpack的dev server和其余东西
一个生产环境用的配置文件，用来定义UglifyJSPlugin，sourcemap和其余东西。

在webpack4中你可以不写一行配置。

怎么作到的？

webpack 4介绍了生产和开发模式。

实际上若是你关注过npm run build的输出信息你会看到这个警告：

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

这表明什么？咱们看看。

打开package.json文件添加以下脚本

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}
复制代码

如今运行：

npm run dev
复制代码

查看./dis/main.js文件。你看到了什么？嗯，我知道，他没有被压缩！

如今这样：

npm run build
复制代码

如今再看，你看到什么？一个压缩后的文件！

是的！

生产模式开启了一系列额外的优化。包括minification, scope hoisting, tree-shaking等。

另外一边开发模式为速度作了优化，除了提供一个没有压缩的包之外没有作额外的事。

因此这是第二个新特性：生产和开发模式。

在webpack4你不须要一行配置，只须要一个--mode选项。

webpack 4：覆盖默认的入口/出口文件

我喜欢webpack4的零配置，可是，若是我要覆盖默认的入口或者出口配置要怎么作呢？

在package.json里配置他们。

这是一个例子

"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"
}
复制代码

webpack 4：用Babel转换ES6的js代码

现代JavaScript大可能是用ES6写的。

可是不是全部浏览器都知道怎么处理ES6。咱们须要作一些转换。

这个转换的步骤叫作transpiling。transpiling是指把ES6转换成浏览器可以识别的代码。

webpack自己并不知道如何去转换，可是它有loaders。把他们想象成转换器。

babel-loader是webpack的一个loader，能够转换ES6以上的代码到ES5。

为了使用这个loader咱们须要去安装一系列的依赖。特别是：

babel-core
babel-loader
babel-preset-env （for compiling Javascript ES6 code down to ES5）

来安装吧：

npm i babel-core babel-loader babel-preset-env --save-dev
复制代码

下一步咱们在项目目录下创建一个.babelrc文件用来配置Babel。

{
    "presets": [
        "env"
    ]
}
复制代码

在这里咱们有两个途径去配置babel-loader：

用webpack的配置文件
在npm脚本里使用--module-bind

哦，我知道你在想什么了。webpack4把本身定位为一个零配置的工具。为何咱们又要写配置文件了呢。

webpack 4的零配置适用于：

入口文件。默认是./src/index.js
出口文件。默认是./dist/main.js
生产和开发模式（无需建立两套配置文件）

这就够了。对于loaders咱们仍然须要使用配置文件。

我曾关于这件事问过Sean。在webpack4中loaders是否和webpack3中没有区别？有计划对这些通用的loaders好比babel-loader提供零配置吗？

他的回答是：

在将来的版本（v4以后，多是4.x或者5.0），咱们已经开始探索预设或附加系统如何帮助咱们定义这一点。咱们不想要的是：把一堆东西塞到核心代码里去。咱们须要的是：可以支持扩展。

对于如今来讲你仍必须依赖webpack.config.js。

webpack 4：经过配置文件使用babel-loader

建立一个名叫webpack.config.js的文件而后配置loader：

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

没有必要去指定入口文件除非你想指定。

下一步打开./src/index.js而后写一些ES6代码：

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
复制代码

最后打包：

npm run build
复制代码

而后去./dist/main.js看看转换后的代码。

webpack 4：不经过配置文件使用babel-loader

还有一种使用webpack loaders的方法。

--module-bind选项让你从命令行指定loaders。谢谢Cezar指出了这一点。

这个选项并非webpack 4独有的。3开始就有了。

你能够这样在package.json中使用：

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

而后你就能够开始构建了。

而后我并非很喜欢这种方法（不喜欢太长的npm脚本），尽管如此它颇有趣。

webpack 4：在webpack 4中配置React

若是你已经安装配置好了babel这会很简单。

安装React：

npm i react react-dom --save-dev
复制代码

添加babel-preset-react：

npm i babel-preset-react --save-dev
复制代码

在.babelrc里配置preset

{
  "presets": ["env", "react"]
}
复制代码

这样就能够了。

如Conner Aiken建议的你能够配置babel-loader也去加载**.jsx**文件。这在你使用jsx扩展名的时候颇有用。

打开webpack.config.js而后这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
复制代码

测试是否搭好你能够在./src/App.js里建立一个React组件。

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return (
    <div> <p>React here!</p> </div>
  );
};
export default App;
ReactDOM.render(<App />, document.getElementById("app")); 复制代码

而后在./src/idnex.js中引入：

import App from "./App";
复制代码

从新构建

webpack 4：HTML插件

webpack须要两个额外的组件去处理HTML：html-webpack-plugin和html-loader。

添加这两个依赖：

npm i html-webpack-plugin html-loader --save-dev
复制代码

而后更新webpack的配置

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};
复制代码

在./src/index.html新建一个HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack 4 quickstart</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>
复制代码

运行：

npm run build
复制代码

查看./dist目录。你会看到运行的结果。

没有必要再你的HTML文件中引入你的JavaScript：它会自动地注入进去。

在浏览器打开./dist/index.html：你能够看到React组件运行起来了！

如你所见在处理HTML上没有什么变化。

webpack 4仍然是一个主要目标是js的模块打包工具。

但有个将HTML做为模块的方法（HTML做为入口）。

提取CSS到文件中

webpack不知道怎么去提取CSS到文件中。

在以前这是extract-text-webpack-plugin的工做。

不幸的是这个插件在webpack 4表现并很差。

Michael Ciniawsky说：

维护extract-text-webpack-plugin是一个很大的负担，并且这不是第一次由于这个问题使得升级webpack的主要版本变得困难。

mini-css-extract-plugin是来解决这些问题的。

提示：你须要把webpack升级到4.2.0.0，否则这个插件没法运行！

安装它：

npm i mini-css-extract-plugin css-loader --save-dev
复制代码

而后创建一个CSS文件用来测试

/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
    line-height: 2;
}
复制代码

配置plugin和loader：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};
复制代码

最后在入口文件中引入CSS：

//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
复制代码

构建：

npm run build
复制代码

查看./dist目录，你应该能看到CSS的结果！

结论：extract-text-webpack-plugin在webpack 4中不能用了。请使用mini-css-extract-plugin。

webpack 4：webpack dev server

在你改变代码后运行npm run dev？这不是个理想的作法。花几分钟去配置下webpack的开发服务。一旦配置了webpack dev server 它会在浏览器中加载你的app。

只要你改变了文件，它会自动地刷新浏览器的页面。

安装下面的包来搭建webpack dev server：

npm i webpack-dev-server --save-dev
复制代码

而后打开package.json调整脚本：

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}
复制代码

保存关闭。

如今运行：

npm run start
复制代码

你就能看到webpack dev server在浏览器中加载你的应用了。

webpack dev server很是适合用来开发。（并且它能使得的React Dev Tools在浏览器中正常的工做）

webpack 4：资源

本教程在Github上的连接 => webpack-4-quickstart

我知道早就有不少webpack的列表可是这里是个人：一系列优秀的webpack4资源 => awesome-webpack-4

这里必定还要提一下Juho Vepsäläinen的SurviveJS webpack 4