常用插件

copy-webpack-plugin

静态文件拷贝

ProvidePlugin

自动加载 可以全局注入依赖

//webpack.config.js
new webpack.ProvidePlugin({
            $vue:['vue/dist/vue.esm.js', 'default']
})
//index.js
console.log($vue) //直接全局访问

mini-css-extract-plugin

抽离css 利于缓存

npm install mini-css-extract-plugin -D
//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins
new MiniCssExtractPlugin({
            filename: 'css/[name].css' 
})
module
//注意需要替换
MiniCssExtractPlugin.loader,//替换之前的 style-loader

optimize-css-assets-webpack-plugin

压缩css

const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
new OptimizeCssPlugin();

new webpack.HotModuleReplacementPlugin()

//webpack.config
plugins: [
        new webpack.HotModuleReplacementPlugin() //热更新插件
    ]
//index.js
if(module && module.hot) {
    module.hot.accept()
}

resolve 配置

//webpack.config.js 
resolve: {
        alias: {
            'react-native': '@my/react-native-web' //这个包名是我随便写的哈
        }
}
//index.js
import 'react-native'