Webpack常用命令及组件

webpack与webpack-cli安装

npm install --save-dev webpack
npm install --save-dev webpack@<version>

npm install --save-dev webpack-cli

*常用loader及plugin

css相关

style-loader

npm install --save-dev style-loader

css-loader

npm install --save-dev css-loader

sass-loader

npm install sass-loader sass webpack --save-dev

postcss-loader

npm i -D postcss-loader

sass-loader

npm install less-loader --save-dev

ExtractTextWebpackPlugin(提取公共css) webpack4需要@next版本

npm install --save-dev extract-text-webpack-plugin@next

文件管理相关`
file-loader（字体，图片资源）

npm install --save-dev file-loader

url-loader(图片url变为专门码)

npm install url-loader --save-dev

imagemin-webpack-plugin(图片压缩)

npm install --save-dev imagemin-webpack-plugin

babel-loader(转义es6)

npm install -D babel-loader @babel/core @babel/preset-env webpack

有时需要为我们在全局去注入ES6+的变量（或者属性/方法），这时可以使用以下插件

babel-transform-runtime (框架内使用)

pm install -D @babel/plugin-transform-runtime

babel-polyfill (应用内使用)

npm install --save @babel/polyfill

文件清理与生成有关

html-webpack-plugin (HTML文件生成插件)

npm install --save-dev html-webpack-plugin

clean-webpack-plugin (清空文件夹插件)

npm install --save-dev clean-webpack-plugin

optimization.splitChunks(公共代码抽取插件)
webpack4内置

optimization: {

    splitChunks: {
    
    chunks: 'all',
    
    },
    
    }

webpack.ProvidePlugin*(提供全局变量插件)

 `new webpack.ProvidePlugin({
    jQuery: 'jquery',
    React: 'react',
    ReactDOM: 'react-dom',
    Component: ['react','Component'] // 导出react模块中的Component
})

打包优化相关
DllPlugin 第三方库优先打包
DllReferencePlugin

new webpack.DllPlugin(options);

new webpack.DllReferencePlugin(options);

HappyPack

npm install happypack --save-dev

webpack-bundle-analyzer (可视化工具)

npm install --save-dev webpack-bundle-analyzer