前端工程化之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会起一个服务做代理

```js
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
}