起一个 webpack server 预览我的项目

运行 webpack-server 服务器

webpack-dev-server --mode development --open

能够通过在 package.json 中配置 script 来简化命令

  "scripts": {
    "test": "echo \"Error: no test specified\"&& exit 1",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

配置热更新 —HMR

const webpack = require('webpack')
plugins: [new webpack.HotModuleReplacementPlugin()
],
devServer: {hot: true}

在入口文件里增加热更新配置

// index.jsx

if(module.hot) {
  module.hot.accept(error => {if(error) {console.log('HRM 出 BUG 了')
    }
  })
}

webpack 性能优化

打包后果优化 & 构建速度优化

压缩代码
webpack 自带了一个压缩 plugin

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
//  ...
  // 压缩代码选项
  optimization: {
    minimizer:  [new TerserPlugin({
      // 放慢构建速度
      cache: true,
      // 开启多线程
      parallel: true,
      terserOptions: {
        // 移除无用代码
        compress: {
          unused: true,
          drop_debugger: true,
          drop_console: true,
          dead_code: true
        }
      }
    })]
  }
//  ...
}

webpack 打包后果分析器

npm install webpack-bundle-analyzer

// webpack.config.js
 const BundleAnalyZerPlugin = require('webpack-bundle-analyzer').BundleAnalyZerPlugin
  // ...
  plugins: [
    // ...
    new BundleAnalyZerPlugin()]
  // ...

放慢构建速度的其余思路

// webpack.config.js
// ...
  module: {
    // 优化解析工夫，跳过一些没有模块化的包，如不解析 jquery
    noParse: /node_modules\/(jquery\.js)/,
    // 缩小查找
    test: /\.jsx?/,
    exclude: /node_modules/,  // 优先级最高，排除某些文件
    include: / /  // 只打包某些文件
    // 三者抵触时，exclude 优先级最高
  }
// ...

多过程打包工具
HappyPack — plugin(有局部 loader 不反对 HappyPack)
thread-loader — loader(须要写在所有 loader 后面)

Tree-Shaking（打消不好的 js 代码）

如引入的模块没有应用，webpack 会检测这个模块，没有应用将不会被打包