webpack

一、打包css 1、plugin: (1)'mini-css-extract-plugin'：将所有css文件打包成一个文件 2、css-loader:默认会打包图片 二、打包js 1、babel 三、全局引入 1、expose-loader //暴露在window上 2、providePlugun //给每个模块提供 3、通过cdn引入，用externals排除node_models相应的包参与打包 三、源码映射 devtool: 'source-map' //打包后会产生单独一个源码文件 devtool: 'eval-source-map' //打包后不会单独产生一个源码文件，但也可以看到源码的行和列 用在开发环境 devtool: 'cheap-module-source-map' //用在生产环境，看不到行和列 四、给引入的文件加上一个公共路径 output: { publicPath: 'http://...' } 五、实时打包 watch: true 六、清空历史打包文件 cleanWebpackPlugin 七、复制不需要打包的文件，如.txt文件 copy-webpack-plugin 八、解决跨域问题，webpack-dev-server会起一个服务做代理

devServer: {
    proxy: {
        '/api': {
            target: '服务端地址',
            pathRewrite:{'/api': ''}
        }
    }
}

九、解析第三方包

十、定义环境变量（生产环境或开发环境） new webpack.DefinPlugin({

}) 十一、不去解析没必要的包（如：jq）,加速打包时间 noParse: /jquery/, rules: [{ test: /.js$/, exclude: /node_modules/, include: path.resolve('src') }]

十二、多线程打包 happyPack 十三、按需打包 webpack在production环境中，如果用的是import导入，会自动使用按需打包， tree-shaking,不打包没用上的代码 require语法是不会自动做tree-shaking 十四、自动简化代码 webpack在生产环境中会自动简化代码如：一些多余的变量声明，会被去除 十五、抽取公共模块，抽取第三方包

十六、webpack提供的依赖懒加载方案 import() //会把依赖打包生成一个单独的文件

十七、热更新 devServer: { hot: true }