devtool
devtool: "cheap-module-eval-source-map"
devtool: "cheap-module-source-map"
HMR
1.配置hot,hotOnly
devServer: {
contentBase: './dist', //服务器要起在哪个文件夹下
open: true,
hot: true,
hotOnly: true
}
2.引入插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
polyfill(业务)
1.引入babel
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
2.文件头部
import "@babel/polyfill";
3..babelrc文件配置
{
"presets": [
["@babel/preset-env", {
"targets": {
"chrome": "67" chrome在67版本以上不转换
},
"useBuiltIns": "usage" //按需添加辅助特征
}],
["@babel/preset-react"]
]
}
transform-run-time(内库,ui等)
1.
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
2, 不需import "@babel/polyfill";
3.配置
{
// "plugins": [["@babel/plugin-transform-runtime", {
// "absoluteRuntime": false,
// "corejs": 2,
// "helpers": true,
// "regenerator": true,
// "useESModules": false
// }]]
}
加前缀
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}
2.postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
tree shaking
1.添加配置
optimization: {
usedExports: true
},
2.package.json
"sideEffects": false, //配置哪些引入不需要tree shaking的
只需要配置
"sideEffects": false,