1. 前言
由於 Parcel 打包工具的影響，webpack4 也追求零配置搭建專案。而前陣子出現的 vue-cli 3.0也是基於 webpack4 零配置的思想建立的。對於一些習慣webpack3 的開發者難免有些不習慣。本文就帶你繞過 vue-cli，用 webpack4 一步步搭建 vue 專案。
注：（本文講述的是webpack4基礎配置，文章有點長，請耐心看完。或者直接檢視專案原始碼，或者ctrl + w）
複製程式碼2. 專案搭建
建立 createVue 資料夾，進入該資料夾， npm init 初始化專案
安裝 webpack 四件套
複製程式碼npm i webpack webpack-cli webpack-dev-server webpack-merge --save-dev
// 當前我使用版本
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5", // 開發伺服器
"webpack-merge": "^4.1.4" // webpack 配置合併
複製程式碼建立相應檔案
createVue
|--dist
|--build
|--webpack.prod.js
|--webpack.dev.js
|--webpack.base.js
|--src
|--index.js
|--app.vue
|--index.html
複製程式碼// webpack.base.js
// 存放 dev 和 prod 通用配置
const webpack = require('webpack');
module.exports = {
entry: './src/index.js', //入口
module: {
rules: []
},
plugins: [
// 解決vender後面的hash每次都改變
new webpack.HashedModuleIdsPlugin(),
],// 外掛
};
複製程式碼// webpack.dev.js
// 存放 dev 配置
const merge = require('webpack-merge');
const common = require('./webpack.base.js');
const path = require('path');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: { // 開發伺服器
contentBase: '../dist'
},
output: { // 輸出
filename: 'js/[name].[hash].js', // 每次儲存 hash 都變化
path: path.resolve(__dirname, '../dist')
},
module: {},
mode: 'development',
});
複製程式碼// webpack.prod.js
// 存放 prod 配置
const path = require('path');
// 合併配置檔案
const merge = require('webpack-merge');
const common = require('./webpack.base.js');
module.exports = merge(common, {
module: {},
plugins: [],
mode: 'production',
output: {
filename: 'js/[name].[contenthash].js', //contenthash 若檔案內容無變化，則contenthash 名稱不變
path: path.resolve(__dirname, '../dist')
},
});
複製程式碼webpack4 增加了 mode 屬性，設定為 development / production,以下是預設配置
development:
process.env.NODE_ENV 的值設為 development
預設開啟以下外掛，充分利用了持久化快取。參考基於 webpack 的持久化快取方案
NamedChunksPlugin ：以名稱固化 chunk id
NamedModulesPlugin ：以名稱固化 module id
production:
process.env.NODE_ENV 的值設為 production
預設開啟以下外掛，其中 SideEffectsFlagPlugin 和 UglifyJsPlugin 用於 tree-shaking
FlagDependencyUsagePlugin ：編譯時標記依賴
FlagIncludedChunksPlugin ：標記子chunks，防子chunks多次載入
ModuleConcatenationPlugin ：作用域提升(scope hosting),預編譯功能,提升或者預編譯所有模組到一個閉包中，提升程式碼在瀏覽器中的執行速度
NoEmitOnErrorsPlugin ：在輸出階段時，遇到編譯錯誤跳過
OccurrenceOrderPlugin ：給經常使用的ids更短的值
SideEffectsFlagPlugin ：識別 package.json 或者 module.rules 的 sideEffects 標誌（純的 ES2015 模組)，安全地刪除未用到的 export 匯出
UglifyJsPlugin ：刪除未引用程式碼，並壓縮
複製程式碼// index.js
// 需 npm i vue --save
import Vue from 'vue';
import App from './App.vue'
import './index.scss'
new Vue({
el: '#app',
render: h => h(App),
});
複製程式碼<!-- app.vue -->
<template>
<div id="app">
hello world
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style scoped>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
transform: rotate(0deg);
}
</style>
複製程式碼<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Suporka Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製程式碼安裝 vue 核心解析外掛
npm i vue-loader vue-template-compiler --save-dev
// 當前我使用版本
"vue-loader": "^15.2.6",
"vue-template-compiler": "^2.5.17",
由於 vue 的解析在 dev 和 prod 中均需使用，因此歸入基本配置 base
// webpack.base.js
// ...省略號
// vue-loader 外掛
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
//...省略號
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請確保引入這個外掛來施展魔法
new VueLoaderPlugin(),
]
};
複製程式碼安裝 html 模板解析外掛
npm i html-webpack-plugin --save-dev
// 當前版本
"html-webpack-plugin": "^3.2.0"
html 解析也屬於基本配置，歸入 base
// webpack.base.js
// ...省略號
// html外掛
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...省略號
plugins: [
//...省略號
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
}),
]
};
複製程式碼建立 npm 命令
"scripts": {
"start": "webpack-dev-server --hot --open --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
},
–hot 模組熱替換
–open 開啟本地伺服器
此時 npm start，專案可正常執行
複製程式碼3. 功能擴充
新增 loader
CSS loader (包括前處理和後處理)
CSS 基礎 loader
"css-loader": "^1.0.0",
"style-loader": "^0.21.0",
CSS 前處理 less 兩件套
"less": "^3.8.0",
"less-loader": "^4.1.0",
CSS 前處理 sass 兩件套
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
CSS 後處理 postcss 兩件套
"postcss-loader": "^2.1.6",
"autoprefixer": "^9.1.0",
並在根資料夾建立 postcss.config.js 檔案
// postcss.config.js
// 自動新增css相容屬性
module.exports = {
plugins: [
require('autoprefixer')
]
}
複製程式碼安裝以上依賴，在 base 檔案中加入一下 loader 程式碼
// webpack.base.js
// ...省略號
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader',
],
},
]
複製程式碼圖片 loader
解析圖片，字型等都是用 file-loader，安裝npm i file-loader --save-dev
base 檔案加入配置
// webpack.base.js
// ...省略號
rules: [
// ...省略號
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 5000,
// 分離圖片至imgs資料夾
name: "imgs/[name].[ext]",
}
},
]
},
]
複製程式碼4. 打包優化
解決每次重新打包，dist 資料夾檔案未清除
安裝 clean-webpack-plugin 外掛
// webpack.prod.js
// 打包之前清除檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');
// ...省略號
plugins: [
new CleanWebpackPlugin(['dist/*'], {
root: path.resolve(__dirname, '../')
}),
]
分離 CSS
webpack4 中使用 mini-css-extract-plugin 外掛來分離 css。
安裝 mini-css-extract-plugin 外掛後
// webpack.prod.js
// 分離CSS外掛
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// ...省略號
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].[hash].css",
chunkFilename: 'css/[id].[hash].css'
}),
]
另外，還需將各個 css loader中的style-loader 替換為 MiniCssExtractPlugin
圖片壓縮使用 image-webpack-loader, 安裝後
程式碼如下：
// webpack.prod.js
// ...省略號
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
'css-loader',
'postcss-loader',
'less-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 5000,
name: "imgs/[hash].[ext]",
}
},
// 圖片壓縮
{
loader: 'image-webpack-loader',
options: {
// bypassOnDebug: true,
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
}
},
},
]
},
]
複製程式碼使用 happypack 多程式加快編譯速度
同時也需要安裝 babel 兩件套
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"happypack": "^5.0.0",
happypack 開發生產環境都用到，配置歸入 base
複製程式碼// webpack.base.js
// 使用happypack
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
// ...省略號
rules: [
{
test: /\.js$/,
//把對.js 的檔案處理交給id為happyBabel 的HappyPack 的例項執行
loader: 'happypack/loader?id=happyBabel',
//排除node_modules 目錄下的檔案
exclude: /node_modules/
},
],
plugins: [
//...
new HappyPack({
//用id來標識 happypack處理類檔案
id: "happyBabel",
//如何處理 用法和loader 的配置一樣
loaders: [
{
loader: "babel-loader?cacheDirectory=true"
}
],
//共享程式池
threadPool: happyThreadPool,
//允許 HappyPack 輸出日誌
verbose: true
}),
]
複製程式碼分離不常變化的檔案，如 node_modules 下引用的庫
// webpack.prod.js
module.exports = merge(common, {
// ...省略號
optimization: {
// 分離chunks
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial" // 只打包初始時依賴的第三方
},
}
},
},
})
如此配置，則打包的 js 資料夾中會多一個 vendor.js
複製程式碼壓縮CSS和JS程式碼
安裝 optimize-css-assets-webpack-plugin 和 uglifyjs-webpack-plugin 外掛
// webpack.prod.js
// 壓縮CSS和JS程式碼
// ...省略號
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = merge(common, {
// ...省略號
optimization: {
// ...省略號
minimizer: [
// 壓縮JS
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false, // 去除警告
drop_debugger: true, // 去除debugger
drop_console: true // 去除console.log
},
},
cache: true, // 開啟快取
parallel: true, // 平行壓縮
sourceMap: false // set to true if you want JS source maps
}),
// 壓縮css
new OptimizeCSSAssetsPlugin({})
]
},
})
複製程式碼最後，再擴充一個 hash, chunkhash, contenthash 的區別
hash是跟整個專案的構建相關，只要專案裡有檔案更改，整個專案構建的hash值都會更改，並且全部檔案都共用相同的hash值
chunkhash和hash不一樣，它根據不同的入口檔案(Entry)進行依賴檔案解析、構建對應的chunk，生成對應的雜湊值。
contenthash 更細緻地根據內容更改，生成對應的雜湊值。解決chunkhash 檔案中引入的檔名因 chunkhash 變動而變動的問題
複製程式碼作者：小皮咖 來源：CSDN 原文：blog.csdn.net/weixin_3878…