webpack 小记

1.HtmlWebpackPlugin

我们可以看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。

但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

在我们构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。

2.clean-webpack-plugin

清理 /dist 文件夹

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

3.定位错误在哪个文件：devtool: 'inline-source-map',

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。

对于本指南，我们使用 inline-source-map 选项，这有助于解释说明我们的目的（仅解释说明，不要用于生产环境）：

4.自动编译

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

多数场景中，你可能需要使用 webpack-dev-server，但是不妨探讨一下以上的所有选项。

5.不用刷新浏览器

使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

6.HMR 修改样式表

借助于 style-loader 的帮助，CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch) <style> 标签。

所以，可以使用以下命令安装两个 loader ：

npm install --save-dev style-loader css-loader

接下来我们来更新 webpack 的配置，让这两个 loader 生效。

7.为了学会使用 tree shaking，你必须……

• 使用 ES2015 模块语法（即 import 和 export）。
• 在项目 package.json 文件中，添加一个 "sideEffects" 入口。
• 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）。

• 注意，虽然 UglifyJSPlugin 是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件：

  • BabelMinifyWebpackPlugin
  • ClosureCompilerPlugin

  如果决定尝试以上这些，只要确保新插件也会按照 tree shake 指南中所陈述的，具有删除未引用代码(dead code)的能力足矣。

8.css-loader 和style-loader

这一小节我们先使用 css-loader 和 style-loader 库。前者可以让 CSS 文件也支持 impost，并且会解析 CSS 文件，后者可以将解析出来的 CSS 通过标签的形式插入到 HTML 中，所以后面依赖前者。

9.extract-text-webpack-plugin插件将 CSS 文件打包为一个单独文件

但是将 CSS 代码整合进 JS 文件也是有弊端的，大量的 CSS 代码会造成 JS 文件的大小变大，操作 DOM 也会造成性能上的问题，所以接下来我们将使用 extract-text-webpack-plugin插件将 CSS 文件打包为一个单独文件

首先安装 npm i --save-dev extract-text-webpack-plugin

10.webpack设置服务器代理详解

var proxyTable = {
'/api': {
// 目标服务器 host
target: 'http://10.16.85.138:8080',
// 默认false，是否需要改变原始主机头为目标URL
changeOrigin: true,
pathRewrite: {
// 重写请求，比如我们源访问的包含/api，那么请求会将/api替换为/yh/ihr/api
'/api': '/yh/ihr/api',
// 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
'^/api/old-path' : '/api/new-path',
// 同上
'^/api/remove/path' : '/path'
},
router: {
// 如果请求接口 == '/api/'
// 则重写目标服务器 'http://10.16.85.138:8080' 为 'http://localhost:8000'
'/api/' : 'http://localhost:8000'
},
// proxy事件: 监听请求返回事件
onProxyRes : proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('target', JSON.stringify(proxyRes.headers, true, 2))
});
}
}