第2章基础用法 - 开发配置 - 《技术的世界》

本地启动的三种方式
- watch
- webpack-dev-server
  - 原理介绍（HMR）
webpack-dev-middleware
HTML模板注入
HTML压缩
CSS压缩
JS压缩

本地启动的三种方式

watch

在源码发生改变的时候，自动重新构建出新的输出文件。有两种方式可以使用它：

启动webpack命令带上 —watch 参数（命令行或者package.json文件的scripts中）
在webpack.config.js配置文件中设置 watch:true

不过它存在一个缺点：重新输出过后需要手动刷新浏览器。

webpack-dev-server

WDS不刷新浏览器
WDS不输出文件，而是存放在内存中
需要使用使用webpack内置的HotModuleReplacementPlugin插件

只需要安装 webpack-dev-server即可

$ npm i webpack-dev-server -D

修改配置文件增加devServer选项和修改plugins部分：

//已省略无关代码
const webpack  = require('webpack');
devServer: {
    contentBase: "./dist",
    hot: true
},

package.json的scripts中增加命令

"scripts": {
  "start": "webpack serve --open"
}

启动npm run start后，修改文件内容可以发现浏览器自动更新了。修改后看似整个浏览器都刷新了，和不刷新浏览器这个说法有所不符合？思考

参考节点：8533417

script中的启动方式总结：

前节的配置通过 webpack --watch 命令，将entry的内容打包好输出到了output指定的dist目录
通过webpack serve --open 将本应输出到dist的内容，存在内存中返回给浏览器，dist中不会看到文件
```
"scripts": {
"webpack": "webpack --watch",
 "start": "webpack serve --open"
},
```
原理介绍（HMR）

原理分为两条线

Webpack Compiler将资源编译成bundle文件，Bundle Server提供给浏览器访问：1-2-A-B
编译改动文件文件，HMR Server通知浏览器端的HRM Runtime获取更新：1-2-3-4

webpack-dev-middleware

例子请参考 https://webpack.js.org/guides/development/#choosing-a-development-tool

自己按照文档配置，打开并不能work。

HTML模板注入

需要使用插件为html-webpack-plugin，它能基于模板html文件，将打包的资源名注入到script标签中，先安装：

npm i html-webpack-plugin -D

再在它的配置项中指定参数即可，为了方便演示打包结果输出到dist的过程，可以注释掉devServer部分：


// devServer: {
//   contentBase: './dist',
//   port: 8090,
//   hot: true
// },
plugins: [ 
    new HtmlWebpackPlugin({ 
        template: path.join(__dirname, 'template/index.html')
    })
]

在新建一个html文件作为模板：

// template/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

npm run webpack 可以看到 dist 目录中输出掉html，其中包含了注入的js。

发现两个问题：

如果你用 npm run webpack启动过，马上用 npm run start可能会无法访问成功，删除掉此前打包到dist下的文件即可，不知道是什么原因。
如果不注释掉devServer相关的部分，在HtmlWebpckPlugin中增加 filename: "index.html"，使用 npm run start同样无法访问成功。

HTML压缩

在HtmlWebpackPlugin的配置中可以指定参数压缩。通常指定 mode: 'production'网页会被自动压缩。

CSS压缩

需要使用插件optimize-css-assets-webpack-plugin，并同时依赖cssnano（CSS解释器)。

首先安装两个依赖：

npm i optimize-css-assets-webpack-plugin cssnano -D

然后修改配置文件：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    plugins: [
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g, 
            cssProcessor: require('cssnano')
        }) 
    ]
}

执行打包命令前看到CSS文件之前是没有压缩的，执行过后…（自己实践下，有无此配置似乎无差别呀❓）

JS压缩

Webpack内置了uglifyjs-webpack-plugin，开启了mode: "production"的时候已经进行了压缩，可以通过打开dist目录下的文件进行查看。

开发配置