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