webpack4配置說明(插件篇)

1.打包代碼壓縮

JSCSS圖片壓縮

2.自動清理構建腳本

clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 plugins: [
        new CleanWebpackPlugin(),
    ]

2.css資源內聯

  1. 方案1:
 {
                test: /.less$/,
                use: [
	                {
	                	loader: 'style-loader',
	                	options: {
	                	insertAt: "top", // 樣式插入到<head>中
	                	singleton: true // 將所有style合成一個
	                	}
	                },
                    'css-loader',
                    'less-loader'
                ]
            }
  1. 方案2:
    html-inline-css-webpack-plugin
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
	plugins: [
		 new HTMLInlineCSSWebpackPlugin()
	]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章