webpack-dev-server --mode development --open
能够经过在package.json中配置script来简化命令node
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" }
const webpack = require('webpack') plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true }
在入口文件里添加热更新配置jquery
// index.jsx if(module.hot) { module.hot.accept(error => { if(error) { console.log('HRM出BUG了') } }) }
压缩代码
webpack自带了一个压缩pluginwebpack
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打包结果分析器web
npm install webpack-bundle-analyzer
// webpack.config.js const BundleAnalyZerPlugin = require('webpack-bundle-analyzer').BundleAnalyZerPlugin // ... plugins: [ // ... new BundleAnalyZerPlugin() ] // ...
加快构建速度的其余思路npm
// 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前面)json
如引入的模块没有使用,webpack会检测这个模块,没有使用将不会被打包性能优化