繼上次發文，好像過了很長時間。。。
1. 初始化專案新建專案目錄webpack4-demo
1.1 新建package.json檔案，自動化產出 npm init 一路回車
1.2 為規範開發，可以引入程式碼風格檢測，這裡我用的是eslint-standard，安裝相關依賴，我這裡用的是淘寶的映象源，npm 訪問太慢，原諒我不會翻牆。
// eslint 相關外掛依賴
cnpm i
eslint
eslint-config-standard
eslint-plugin-standard
eslint-plugin-promise
eslint-plugin-import
eslint-plugin-node
eslint-plugin-html -D
複製程式碼相關依賴版本資訊如下：
專案根目錄下 新建.eslintrc檔案，專案就開啟了eslint檢測，我用的是vscode，可以安裝相關eslint外掛
{
"extends": "standard",
"plugins": [
"html",
"standard",
"promise"
],
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module"
},
"rules": { // 自定義規則，行尾增加分號；
"semi": ["error", "always"]
}
}
複製程式碼eslint詳細配置，可參考官網ESLint - Pluggable JavaScript linter
1.3 專案開發目錄
2. 配置專案的webpack.config.js配置
2.1 在專案根目錄下新建webpack.config.js,引入相關模組
const webpack = require('webpack'); // 引入webpack
const path = require('path'); // 引入路徑模組
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
複製程式碼2.2 獲取多頁面入口檔案並生成html頁面
// 獲取入口檔案
const entries = glob.sync('./src/**/index.js');
const entrys = {};
const htmlPlugins = [];
// 量產html
for (const path of entries) {
const template = path.replace('index.js', 'index.html');
var chunkName = (/.*\/(pages\/.*?\/index)\.js/.exec(path)[1]).replace(/pages\//g, '');
// 生成入口檔案
entrys[chunkName] = path;
// 生成頁面模板檔案
htmlPlugins.push(new HtmlWebpackPlugin({
template,
filename: chunkName + '.html',
chunksSortMode: 'none',
chunks: [chunkName, 'js/common'],
// favicon: './favicon.ico',
inject: true,
hash: false, // 開啟hash ?[hash]
minify: isDev ? false : {
removeComments: true, // 移除HTML中的註釋
collapseWhitespace: true, // 摺疊空白區域 也就是壓縮程式碼
removeAttributeQuotes: true // 去除屬性引用
}
}));
}
複製程式碼2.3 全域性配置jquery,之前按照網上的教程，jquery程式碼可以跑起來，但是在瀏覽控制檯裡執行報如下錯誤：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
感覺這麼配置起來沒問題，在控制列印就gg了...報錯如下
複製程式碼為解決這個問題，查了一些資料，看到有大佬說用expose-loader可以完美解決。二話不說，激動的立馬cnpm了
cnpm install -D expose-loader
// 在webpack.config.js裡配置後，搞定以上報錯
rules: [
{
// 通過require('jquery')來引入
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
// 暴露出去的全域性變數的名稱 隨便你自定義
options: 'jQuery'
},
{
// 同上
loader: 'expose-loader',
options: '$'
}
]
}]
複製程式碼3. 複製靜態檔案至dist指定目錄，打包前先刪除原dist目錄
3.1 這些功能實現，我們需要依賴兩個外掛copy-webpack-plugin，clean-webpack-plugin
cnpm install -D clean-webpack-plugin clean-webpack-plugin
// 配置外掛
new CleanWebpackPlugin(resolve('dist')), // 自動刪除指定目錄檔案配置
new CopyWebpackPlugin([ // 支援輸入一個陣列, 靜態資源引入拷貝
{
from: resolve('src/assets'), // 將src/assets下的檔案
to: './assets' // 複製到dist目錄下的assets資料夾中
}
])
複製程式碼4. 處理less,css 檔案，自動新增瀏覽器字首
4.1 安裝相關依賴
cnpm install -D
postcss-loader
less less-loader
mini-css-extract-plugin
css-loader
autoprefixer
複製程式碼4.2 在專案根目錄新建.postcss.config.js，配置內容如下
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['cover 99.5% in CN']
})
]
}
// 也可以在package.json 中配置，官方推薦模式
"browserslist": ["cover 99.5% in CN"]
複製程式碼4.3 在webpack.config.js 裡配置規則和外掛模式
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
// 在plugins中配置
new MiniCssExtractPlugin({
filename: '[name].min.css'
}),
複製程式碼4.4 npm run build 後，成功打包，但是html 圖片資源路徑載入出問題了。我這裡使用了 html-withimg-loader 外掛進行處理，css背景圖路徑問題，在圖片處理規則中新增 publicPath: '../'
{ // html
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader'
}
{ // images
test: /\.(png|jpeg|jpg|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: { // options選項引數可以定義多大的圖片轉換為base64
limit: 10 * 1024,
name: 'assets/images/[name].[ext]',
publicPath: '../' // 解決css背景圖的路徑問題
}
}]
}
複製程式碼4.5 成功打包的dist目錄
5.匯入公共的html檔案
5.1 沒有用其他模板語法來處理，在npm上找到了個html-withimg-loader，可以處理Html裡圖片資源路徑問題和匯入一些共用的html檔案
// 安裝相關依賴
cnpm instal html-withimg-loader -D
// 配置規則
{ // html
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader'
}
// 在html檔案中引用模板檔案
#include("../../layout/tpl_head.html")
複製程式碼