1、壓縮CSS以及優化CSS結構(optimize-css-assets-webpack-plugin)
處理效果:
將CSS壓縮
optimize-css-assets-webpack-plugin
安裝(下載)
npm install --save-dev optimize-css-assets-webpack-plugin
配置config文件
引入插件
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
配置plugin
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp: /.css$/, 正則表達式匹配需要優化或者壓縮的資源名
cssProcessor: 用於壓縮和優化CSS的處理器, 默認 cssnano
cssProcessorPluginOptions: { 傳遞cssProcessor的插件選項,{}
preset: ['default', {discardComments: {removeAll: true}}]
}
canPrint: 表示插件能夠在console中打印信息
})
2、運用webpack插件拷貝靜態文件(copy-webpack-plugin)
安裝(下載)
npm install --save-dev copy-webpack-plugin
配置config文件
引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
配置Plugin配置:
plugins: [
new CopyWebpackPlugin([
{
from: __dirname + 'status',
to: __dirname + /build/status
}
])
]
3、webpack插件之clean-webpack-plugin清除文件
處理效果:
當我們修改帶hash的文件並進行打包時,每打包一次就會生成新的文件，而舊的文件並沒有刪除為了解決這種情況，我們可以使用clean-webpack-plugin在打包之前將文件先清除,之后再打包出新的文件
安裝(下載)
npm install --save-dev clean-webpack-plugin
配置config文件
引入插件:
const CleanWebpackPlugin = require('clean-webpack-plugin')
Plugin配置
Plugins: [
new CleanWebpackPlugin(['build'])
]
4、webpack處理HTML內嵌圖片
處理效果
未使用loader,會出現路徑錯誤,圖片不顯示
經過loader處理才能正常顯示
安裝(下載)
npm install -save-dev html-loader
配置config文件
Rules配置
module:{
rules: [
{
test: '/.html/',
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src']
}
}
}
]
}