1.項目中我們經常要引用別人的包，很多時候我們使用的僅僅是別人包里面的幾個方法或者樣式，如果打包的時候將別人的包整個打包進行，就多了很多無用的代碼，所以需要將這些無用的代碼去掉。
2.去掉無用的js代碼：這個功能webpack已經自帶了，前提是我們要用es6的方式引用和導出包，並且打包的模式要為production生產模式。
3.去除無用的css代碼：首先安裝包：npm install purgecss-webpack-plugin -D
然后在webpack.config.js文件中使用該插件：
const{resolve,join}=require('path');//引入node中的join來合並兩個路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');//引入插件
const glob = require('glob');//引入node中的glob方法
const PATH = {src:join(__dirname,'src')}//拼接根路徑
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
publichPath:'./images',
outputPath:'images/',
limit:1024*16,
name:'[name].[ext]'
}}]},
{test: /\.(html)$/, use:['html-loader']},
{exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{
publichPath:'./svg',
outputPath:'svg/',
name:'[name].[ext]'
}}]},
{
test:/\.js$/,
exclude:/node_modules/,
loader:'eslint-loader',
options:{
fix:true
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
new PurgecssPlugin({//使用插件
paths:glob.sync(`${PATH.src}/**/*`,{nodir:true})//配置表是檢查根路徑下的所有文件中使用了的css文件才進行打包
})
],
target:"web",
devServer:{
port:3001,
compress:true,
open:true
}
}