webpack入门笔记

Posted 2021-10-11 月岛蘑菇

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