webpack4的使用小结

on webpack4

webpack4已经发布了。打包性能大幅度提升，改善之前的复杂配置和默认设置。

现在前端开发越来越复杂，对代码需要进行模块化、打包、压缩、加时间戳等等。此时就需要用到构建工具，目前流行的构建工具有webpack、gulp、grunt、Browserify、FIS等等。

这篇文章主要是关于webpack4的一些学习总结。

webpack

webppack的功能非常强大，问题是配置比较麻烦。

如果是中大型的项目，使用webpack配置感觉没有什么工作量。如果是小型的单页面，就会觉得webpack的配置浪费了一大部分的时间。

以至于出了一个一键配置的工具：Parcel。

现在webpack4发布了，最吸引人的一点就是不再需要繁琐的配置。所以此时就想写一写webpack4的学习总结。

webpack4

零配置入门

创建一个文件夹并进入：

mkdir webpack-4-demo && de $_

初始化package.json：

npm init -y

安装webpack :

npm i webpack webpack-cli --save-dev

打开package.json添加打包命令：

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

运行以下命令：

npm run build

发现控制台报错：

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in Entry module not found: Error: Can't resolve './src' in '/webpack/webpack-4-demo'

1.未设定mode，这是webpack4新功能。有两种模式，development、production、（还有一个隐藏的none模式），默认production。

2.入口模块不存在-webpack4默认从项目根目录下的./src/index.js中加载入口模块（entry）。

所以新建src/index.js文件，不写入内容，再次进行打包，会得到./dist/main.js

综上，webpack4不需要定义入口和出口。—webpack4不需要配置文件。

两种模式：development、production

一个是用于开发的配置文件，用于定义webpack-dev-server等等

一个是用于生产的配置文件，用于定义压缩UglifyJsPlugin、sourceMaps等等

回到上述执行npm run build出现的警告问题：

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

mode未设置，打开package.json文件，修改scripts配置项:

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

配置--mode后，执行npm run dev和npm run build不再出现警告。

分别查看两个命令下的./dist/main.js文件，dev为未压缩的代码，build为压缩后的代码。

development模式专注于构建，提供最好的开发体验，其功能包括:

1.本地浏览器调试工具

2.详细错误提示

3.快速进行变更的增量重建

production模式是部署上线最好的方式，默认功能包括：

代码合并压缩

模块连接（范围提升）

输出压缩后的文件尺寸较小

删除仅限开发的代码

重新配置默认的entry/output

修改package.json配置：

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

配置文件

举例说明

webpack使用babel-loader可以将es6编译成es5.

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

需要新建一个.babelrc文件配置：

{
    "presets": [
        "env"
    ]
}

为什么还需要配置文件？

因为关于webpack4的零配置主要是指以下几个方面：

1.默认配置入口。默认：./src/index.js

2.默认配置出口。默认：./dist/main.js

3.模式：生产（production）、开发（development）两种模式，不需要再单独创建两个配置文件。

所以，webpack4使用loader仍然需要创建一个配置文件。

在配置文件中使用babel-loader

创建webpack.config.js文件，添加配置：

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

在./src/index.js中输入：

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

执行npm run build可以看到./dist/main.js编译过的文件。

不需要配置文件使用babel-loader

使用--module-bind可以直接指定loader。这是webpack3就有的功能。

比如，修改package.json的配置文件：

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

react 使用webpack4

安装：

npm i react react-dom babel-preset-react --save-dev

配置 .babelrc文件：

{
  "presets": ["env", "react"]
}

创建react组件./src/App.js:

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/index.js引入该组件：

import App from "./App";

运行npm run build进行构建。

HTML webpack plugin

webpack处理html需要两个插件：html-webpack-plugin和html-loader

npm i html-webpack-plugin html-loader --save-dev

配置webpack.config.js文件：

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"
    })
  ]
};

新建html文件./src/index.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack 4 demo</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

运行npm run build，进行构建。查看./dist的最终结果。

webpack dev server

运行npm run dev时，每次更改文件，浏览器会自动刷新。

首先安装包：

npm i webpack-dev-server --save-dev

配置package.json：

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

运行npm run dev

这是对webpack4的简单小结。后期遇到问题再继续。