起一个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会检测这个模块，没有应用将不会被打包