webpack4與vue2.6已經出來一段時間了，忙於業務一直沒有時間做升級，cli又不能滿足業務上的需求，決定拋棄腳手架手擼一個最新的基於vue的webpack專案。
1.首先先建立一個資料夾，輸入命令
npm init
複製程式碼2、下載webpack4 與 webpack CLI
一系列操作之後，package包出現了，我們先下載關於webpack的依賴包，輸入指令。
npm i webpack webpack-cli webpack-dev-server -D
複製程式碼3、下載vue、vue-route、vuex
npm i vue vue-router vuex //生產依賴
npm i vue-template-compiler vue-loader vue-style-loader -D //開發依賴
複製程式碼4、配置關於vue的檔案
5、建立webpack.config.js並配置package指令碼
首先我們在根目錄建立webpack.config.js
module.exports = {
entry: 'main.js', // 入口檔案，也就是打包這個js檔案
output: { // 打包的檔案位置
filename: 'bundle.[hash:8].js', //當js檔案更改， [hash]的值會變化，每次build會生成一個新的js檔案，[hash:8]，只顯示8位的hash值，打包出來當然檔名叫 bundle.js
path: path.resolve(__dirname, 'jycloud'), //resolve() 可以把相對路徑解析成絕對路徑， __dirname 是當前目錄，路徑必須是一個絕對路徑，相對於根目錄
}
}
複製程式碼為了方便操作我們先配置webpack指令碼
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server",
"start": "npm run dev"
}
複製程式碼6、配置webpack服務
devServer: { // 開發伺服器的配置
port: 3000,
progress: true, // 編譯的進度條
contentBase: path.join(__dirname, 'static'), // 以static目錄為預設啟動目錄
compress: true, // 自動壓縮
open: true,// 自動開啟瀏覽器
}
複製程式碼7、配置html。
前期工作鋪墊好了，我們先開始配置html，先下載
npm i html-webpack-plugin -D
複製程式碼然後我們進行webpack.config.js的配置。
const HtmlWebpackPlugin = require('html-webpack-plugin')//html分離
複製程式碼 plugins: [ // 陣列,放著所有的webpack外掛
new HtmlWebpackPlugin({
template: 'index.html', // 注意路徑為根目錄下的路徑
filename: 'index.html', // 打包後也叫做 index.html
minify: { // 壓縮這個html檔案(主要是對HTML檔案進行壓縮)
removeAttributeQuotes: true, // 刪除這個html檔案的雙引號
collapseWhitespace: true // 變成一行
},
hash: true
})
]
複製程式碼8、配置css。
npm i style-loader css-loader less less-loader postcss-loader autoprefixer -D
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin -D
複製程式碼然後我們進行webpack.config.js的配置。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//這個外掛的主要作用是實現css分離
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')// 這個外掛作用是對單獨抽離出來的css檔案進行壓縮。
複製程式碼 module: { // 模組loader 預設是從右到左，從下到上執行,多個loader需要一個陣列，loader是有順序的，預設是從右向左執行，loader還可以寫成 物件方式
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 把樣式都抽離成一個單獨的css檔案
"css-loader",
"postcss-loader"//給CSS3語法，比如transfrom加上字首， 需要新建 postcss.config.js 配置檔案，需要引用 autoprefixer 這個外掛
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import這種語法的
'postcss-loader',
'less-loader' // 把less轉變為css
]
}
]
}
複製程式碼plugins: [ // 陣列,放著所有的webpack外掛
new MiniCssExtractPlugin({
filename: 'jycloud.css'
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: require('cssnano'), //引入cssnano配置壓縮選項
cssProcessorOptions: {
discardComments: { removeAll: true }
},
canPrint: true//是否將外掛資訊列印到控制檯
})
]
複製程式碼postcss.config.js配置
module.exports = {
plugins: [require('autoprefixer')]// // 需要用到 autoprefixer外掛
}
複製程式碼9、配置圖片
npm i url-loader file-loader -D
npm i html-withimg-loader -D //處理html填入圖片
複製程式碼然後我們進行webpack.config.js的配置。
module: {
rules: [
{
test: /\.html$/, // 找到html檔案
use: 'html-withimg-loader'//解決html引入圖片打包的問題
},
{
test: /\.(png|jpg|gif)$/, // 找到所有的圖片
use: {// 做一個限制，當我們的圖片，小於多少k的時候，用base64來轉化，否則用file-loader產生真實的圖片
loader: 'url-loader',
options: {
limit: 200 * 1024 // 小於200k，會轉化成base64
}
}
},
]
}
複製程式碼10、配置js
npm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
複製程式碼然後我們進行webpack.config.js的配置。
module: {
rules: [
{
test: /\.js$/, // 找到所有的js檔案
use: {
loader: 'babel-loader', // 用babel-loader，需要把ES6轉換成ES5語法
options: {
presets: [ // babel的集合
'@babel/preset-env' // @babel/preset-env 就是用來將ES6轉化成ES5語法的
],
plugins: [
['@babel/plugin-proposal-decorators', {'legacy': true}], // 將ES7語法中的類裝飾器轉換成ES5語法， legacy 是寬鬆模式
['@babel/plugin-proposal-class-properties', {'loose': true}], // 將ES7語法中的類轉換成ES5語法
'@babel/plugin-transform-runtime'//避免編譯出現重複
]
}
},
include: path.resolve(__dirname, 'src'),// 只查詢src目錄下的js，不找node_modules裡面的js
},
]
}
複製程式碼11、配置vue
const VueLoaderPlugin = require('vue-loader/lib/plugin');//VueLoaderPlugin,注意路徑一定是('vue-loader/lib/plugin')，而不是('vue-loader')，不然會報錯
複製程式碼module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
]
}
複製程式碼plugins: [
new VueLoaderPlugin()
]
複製程式碼12、webpack.config.js單獨放入資料夾。
目前的webpack.config.js在根目錄
13、webpack.config.js總結構
結語
零零散散的時間配置了這個webpack，總算是大功告成。可能還有許多不足，歡迎指正。