一小时上手webpack（基础使用指南含demo）

一、什么是webpack

官方定义：

webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.

简单的说webpack是一个构建工具，什么是构建工具呢，我们在开发环境的代码，是为了方便阅读与开发，生产环境的代码则是为了代码更好的运行。开发环境的代码，要进行压缩编译以后，才能放在线上执行，这样代码体积更小，加载起来更快，所以构建工具一般有以下几种作用：

1、代码压缩

将JS、CSS代码混淆压缩，让代码体积更小，加载更快

2、编译语法

编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。

3、处理模块化：

CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。

二、why webpack

模块化

之前写过一篇关于模块化的文章，不管是AMD还是CMD，都是runtime的时候进行的，且浏览器的支持性还不是特别好，需要一个东西来进行转化。

loader

一个web不止有js，还有css和各种静态资源，webpack提供了各种loader来处理css和less、sass。

转载一个关于webpack诞生的故事：

2012年，一个叫做Tobias的，在Newberg(美国一个城市)读master的德国人要写一片学位论文。他之前是写c#的，从来没有写过一个web界面。他在一些特定的场景需要用到Google Web Toolkit中的一个叫做code splitting的功能。而在他的论文中他需要写一个web app，他就想找一个包含这个功能的库来用。他找到的这个库叫webmake，这也是一个bundler。但是却没有code splitting这个功能，于是他提了一个issue，并且写了一堆如何实现这个功能的代码，希望维护者能够加入这个功能。在一番讨论过后维护者拒绝了他，于是在经过同意之后，他把这个库fork到了了过去并自己加上了这个功能，给新的库取名为webpack。

2014年，Dan Abramov在Stack Overflow上提了一个关于hot module replacement的问题，Tobias用很大的篇幅给他介绍了这个还在开发的功能，详细解释了这个功能怎么在webpack里工作的，以及这个功能有多棒，你可以不用刷新浏览器了！

2015年，这时在Instagram工作的Pete Hunt通过一次演讲告诉了世界他们是如何使用webpack打包发布他们的react app的。然后你懂得，webpack就火了。像Facebook这样的公司也开始使用webpack了。但是其实Tobias只是每周大概花5 6个小时在webpack中。

是的，在这两个讨论中，webpack彻底火了，走向了世界。

三、搭建环境

创建项目

创建一个项目目录并生成 package.json。npm 使用它来管理项目依赖项。以下是基本命令：

mkdir webpack-demo

cd webpack-demo npm init -y

安装 Webpack

npm install webpack webpack-cli --save-dev

运行webpack

在src目录下新建一个index.js

console.log(111)

执行命令：

webpack

自动会生成一个dist文件夹，main.js里面会生成一个

console.log(111)

四、配置 html-webpack-plugin

可以借助html-webpack-plugin来新建一个HTML文件在浏览器看效果

npm install html-webpack-plugin --save-dev

新建一个webpack.config.js

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    })
  ]
}

修改index.js

document.write('你好世界!!!')

执行命令：webpack，会看到dist文件下会多出来一个index.html，在浏览器打开index.html就出现熟悉的页面了

五、配置webpack-dev-server

WDS 是在内存中运行的开发服务器，这意味着打包内容不会写入文件而是存储在内存中。这一区别在调试代码和样式时非常重要。

默认情况下，WDS 会在您开发应用程序时自动在浏览器中刷新内容，因此您无需亲自执行此操作。但它也支持高级 Webpack 功能——热模块更换（HMR）。

安装

npm install webpack-dev-server --save-dev

配置

我们需要用npm script来启动他，按照npm的约定，我们定义一个命令，在package.json文件里面：

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

这肯定是非常眼熟了，我们在使用vue-cli的时候一定会有类似的命令

启动

正常情况下，输入命令npm start或者npm run start就可以启动项目了

但是一般情况下都会报这个错，因为webpack和WDS对于版本的兼容性要求很高，这一点也非常的恶心

我的解决方案是在package.json文件里面：

"webpack": "^4.17.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"

然后重新npm install，再次启动项目就好了

如果你尝试修改代码，你应该会在终端里看到一些输出信息。浏览器也会根据变动做一些强制更新。

基础配置 WDS

webpack.config.js

devServer: {
    // 仅显示错误级别的输出,从而减少输出信息
    stats: "errors-only",

    // 从环境变量中传入 host 和 port,从而达到可配置
    //
    // 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把
    // host 设置为 "0.0.0.0";
    //
    // 0.0.0.0 对于所有的网络设备都是可用的
    // 而默认的 `localhost` 不行.
    host: process.env.HOST, // 默认为 `localhost`
    port: process.env.PORT, // 默认为 8080
    open: true, // 在浏览器中打开
},

通过网络访问开发服务器

webpack.config.js

host: '0.0.0.0',

package.json

"start": "webpack-dev-server --host 0.0.0.0 --mode development",

此时启动以后就可以用过本机IP地址访问本地服务了

修改配置文件热更新

当打包文件发生变化时，开发服务器会自动重启；但是，当 Webpack 配置变化了呢？如果说，每次配置变动你就要手动重启开发服务器，没过一会儿，你就会厌烦不堪了。如 GitHub 中所讨论的那样，我们可以使用 nodemon 监视工具自动执行该过程。

安装nodemon

npm install nodemon --save-dev

package.json

"start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",

轮询而不是监测文件

这个选项适合有时候热更新不管用了，可以试一下这个选项，基本都能解决

devServer: {
    watchOptions: {
      // 首次更改后延迟多少时间再重新构建
      aggregateTimeout: 300,

      // 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值)
      poll: 1000,
    },
},

六、Webpack Dev Middleware

webpack-dev-middleware是一个包装程序，它将通过webpack处理的文件发送到服务器。它在webpack-dev-server内部使用，但是如果需要，它可以作为单独的软件包使用，以允许进行更多自定义设置。我们将看一个webpack-dev-middleware与Express服务器结合的示例。

安装

npm install --save-dev express webpack-dev-middleware

webpack.config.js的output新增一个输出地址

module.exports = {
  devServer: {
    // 仅显示错误级别的输出,从而减少输出信息
    stats: "errors-only",

    // 从环境变量中传入 host 和 port,从而达到可配置
    //
    // 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把
    // host 设置为 "0.0.0.0";
    //
    // 0.0.0.0 对于所有的网络设备都是可用的
    // 而默认的 `localhost` 不行.
    host: '0.0.0.0', // 默认为 `localhost`
    port: process.env.PORT, // 默认为 8080
    useLocalIp: true,
    open: false, // 在浏览器中打开
    watchOptions: {
        // 首次更改后延迟多少时间再重新构建
        aggregateTimeout: 300,

        // 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值)
        poll: 1000,
    },
  },
  output: {
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    })
  ]
}

新建一个server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

package.json加一个命令

"scripts": {
    "start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",
    "build": "webpack --mode production",
    "server": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  

运行

npm run server

在localhost:3000就可以看到输出的服务了

记在最后

webpack内容非常多，接下来还会继续记录loader和分包加载以及各种插件