webpack

devtool

• development

 devtool: "cheap-module-eval-source-map"

• production

 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

• mode: ‘development’

1.添加配置
optimization: {
        usedExports: true
    },
2.package.json
"sideEffects": false,  //配置哪些引入不需要tree shaking的
  

• mode: ‘production’

只需要配置
"sideEffects": false,