yarn add purify-css purifycss-webpack -D
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// 去除無用的css
plugins: [
new PurifyCSSPlugin({
// 路勁掃描 nodejs內置 路勁檢查
paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
})
]
複製代碼
yarn add webpack-parallel-uglify-plugin -D
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new WebpackParallelUglifyPlugin({
uglifyJS: {
output: {
beautify: false, //不須要格式化
comments: false //不保留註釋
},
compress: {
warnings: false, // 在UglifyJs刪除沒有用到的代碼時不輸出警告
drop_console: true, // 刪除全部的 `console` 語句,能夠兼容ie瀏覽器
collapse_vars: true, // 內嵌定義了可是隻用到一次的變量
reduce_vars: true // 提取出出現屢次可是沒有定義成變量去引用的靜態值
}
}
})
]
複製代碼
大網站有多個頁面,每一個頁面因爲採用相同技術棧和樣式代碼,會包含不少公共代碼 連接css
// webpack4最新配置,能夠搜索關鍵字查查配置項
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
name: 'common'
}
}
}
},
複製代碼
在package.json中
"scripts": {
"build": "webpack --mode development",
"build:dll": "webpack --config webpack.dll.config.js --mode development",
"dev": "webpack-dev-server --open --mode development"
}
新建webpack.dll.config.js
const path = require('path')
const webpack = require('webpack')
/**
* 儘可能減少搜索範圍
* target: '_dll_[name]' 指定導出變量名字
*/
module.exports = {
entry: {
vendor: ['jquery', 'lodash']
},
output: {
path: path.join(__dirname, 'static'),
filename: '[name].dll.js',
library: '_dll_[name]' // 全局變量名,其餘模塊會今後變量上獲取裏面模塊
},
// manifest是描述文件
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]',
path: path.join(__dirname, 'manifest.json')
})
]
}
在webpack.config.js中
plugins: [
new webpack.DllReferencePlugin({
manifest: path.join(__dirname, 'manifest.json')
})
]
執行npm run build:dll 就能夠打包第三方包了
複製代碼
HappyPack就能讓Webpack把任務分解給多個子進程去併發的執行,子進程處理完後再把結果發送給主進程。 happypackhtml
npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
{
test: /\.js$/,
// loader: 'babel-loader',
loader: 'happypack/loader?id=happy-babel-js', // 增長新的HappyPack構建loader
include: [resolve('src')],
exclude: /node_modules/,
}
plugins: [
new HappyPack({
id: 'happy-babel-js',
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happyThreadPool
})
]
複製代碼
yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
})
]
複製代碼
git完整代碼連接vue
entry: { //entry是一個字符串或者數組都是單頁,是對象則是多頁,這裏是index頁和base頁
index: './pages/index/index.js',
base: './pages/base/base.js'
}
一個頁面對應一個html模板,在plugin中
plugins: [
new HtmlWebpackPlugin({
template: './pages/index/index.html',
filename: 'pages/index.html',
hash: true,
chunks: ['index', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new HtmlWebpackPlugin({
template: './pages/base/base.html',
filename: 'pages/base.html',
hash: true,
chunks: ['base', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
]
複製代碼
完整多頁配置代碼以下 git完整代碼連接node
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const Webpack = require('webpack')
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// let cssExtract = new ExtractTextWebpackPlugin('static/css/[name].css')
module.exports = {
entry: {
index: './pages/index/index.js',
base: './pages/base/base.js'
},
output: {
path: path.join(__dirname, 'dist'),
// name是entry的名字main,hash是根據打包後的文件內容計算出來的hash值
filename: 'static/js/[name].[hash].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
})
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
name: 'common'
}
}
}
},
plugins: [
new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
new HtmlWebpackPlugin({
template: './pages/index/index.html',
filename: 'pages/index.html',
hash: true,
chunks: ['index', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new HtmlWebpackPlugin({
template: './pages/base/base.html',
filename: 'pages/base.html',
hash: true,
chunks: ['base', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new ExtractTextWebpackPlugin({
filename: 'static/css/[name].[hash].css'
}),
new PurifyCSSPlugin({
// 路勁掃描 nodejs內置 路勁檢查
paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 9090,
host: 'localhost',
overlay: true,
compress: true // 服務器返回瀏覽器的時候是否啓動gzip壓縮
}
}
複製代碼
assetsRoot:構建輸出目錄 也就是構建後的東西都扔這裏
assetsSubDirectory:資源子目錄(static) 除了index.html,其他的js img css都分在這裏
assetsPublicPath:項目目錄 一個槓槓(/) 啥意思呢,是根目錄的意思
複製代碼