資訊專欄INFORMATION COLUMN
使用webpack配置MPA
為什么需要使用 webpack 構建多頁應用呢？因為某些項目使用 SPA 不太合適（大多是 SEO 的原因），或者您在做項目時有其他的需求。
如果你有如下需求：
使用 ES6 進行開發
期望使用面向對象開發（class）
自動壓縮合并 CSS 和 JS 文件
使用 ESLint 進行代碼檢查
自動生成 HTML 文件
自動抽取 CSS 文件 ...
有了這些需求，基本上就必須使用 webpack 了。
安裝依賴首先是項目中需要使用的依賴安裝。
安裝 webpack 和 webpack-dev-server
npm install webpack webpack-dev-server --save-dev
安裝 webpack-merge
npm install webpack-merge --save-dev
該插件用來對 webpack 配置進行合并操作。
安裝 babel 相關插件
npm install babel-core babel-loader babel-preset-env --save-dev
這系列插件用來對 ES6 語法進行轉換。
安裝樣式處理相關插件
npm install css-loader style-loader postcss-loader autoprefixer --save-dev
這系列插件用來處理 CSS 樣式，其中 autoprefixer 是 postcss 的一個插件，用來自動給 CSS 樣式添加前綴。
安裝 file-loader
該插件將在導入圖片、字體等文件時發揮作用。PS.您也可以安裝 url-loader 以實現相同的作用：
npm install file-loader --save-dev npm install url-loader --save-dev
安裝 ESLint 相關的插件
npm install eslint eslint-loader --save-dev
這些插件用來對 JavaScript 代碼進行檢查。
安裝 html-webpack-plugin 插件
npm install html-webpack-plugin --save-dev
該插件用來自動生成 HTML 文件。
安裝 extract-text-webpack-plugin 插件
npm install extract-text-webpack-plugin --save-dev
該插件用來將 CSS 抽取到獨立的文件。
安裝 clean-webpack-plugin 插件
npm install clean-webpack-plugin --save-dev
該插件用來對 dist 文件夾進行清理工作，每次打包時先清理之前的 dist 文件夾。
下面是這些安裝了的所有依賴：...
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"eslint": "^4.6.1",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
},
...
配置文件劃分
使用 webpack 進行項目構建時，我們有不同的目的，因此最好將配置文件進行拆分，以適應不同的工作：
├─config │ config.js │ webpack.config.base.js │ webpack.config.dev.js │ webpack.config.lint.js │ webpack.config.prod.js │ webpack.config.js下面是一些配置的說明：
config.js：一些全局的配置，比如 HTML 文件的路徑、publicPath 等 webpack.config.base.js：最基礎的配置文件 webpack.config.dev.js：開發環境配置文件 webpack.config.lint.js：使用 ESLint 代碼檢查時的配置文件 webpack.config.prod.js：生產環境配置文件 webpack.config.js：主配置文件，根據環境變量引用相應的環境的配置
這些配置文件之間是通過 webpack-merge 這個插件進行合并的。
配置多頁應用的關鍵點如何使用 webpack 配置多頁面應用呢？實現多頁面應用的關鍵點在哪里呢？首先需要簡單看一下多頁應用和單頁應用功能的區別。
單頁應用的特點：只有一個入口頁面（index.html）
這個單頁頁面（index.html）中需要引入打包后的所有 JavaScript 文件
所有的頁面內容完全由 JavaScript 生成
單頁應用有自己的路由系統，服務器端沒有和路由對應的文件
···
每個版塊對應一個頁面
每個頁面需要對公共的 JavaScript 進行引入
每個頁面還需要引入和其自身對應的 JavaScript 文件
由于對應了多個頁面，因此不是所有頁面內容都是由 JavaScript 生成的
沒有自己的路由系統，服務器端有對應的靜態文件
···
拋開生成頁面內容和路由系統，我們可以看到單頁應用和多頁應用最大的區別就是：
單頁應用需要在入口頁面引入所有的 JavaScript 文件
多頁應用需要在每個頁面中引入公共的 JavaScript 文件以及其自身的 JavaScript 文件
由于 CSS 文件是可以由 extract-text-webpack-plugin 這個插件自動提取并插入到 HTML 頁面的，因此我們只需要關心如何在 HTML 頁面中引入 JavaScript 文件了。
webpack 在打包時，會將入口文件中的 JavaScript 文件打包到某個目標文件中，在不考慮代碼分割提取的情況下，一個入口文件會打包為一個目標文件，多個入口文件會打包為多個對應的目標文件。
因此，我們可以將每個多頁頁面中的特有的 JavaScript 文件作為入口文件，在打包時將對應打包成不同的 bundle 文件（結果文件），如果你想要的話，還可以在打包時進行代碼分割處理，將公用代碼抽取成一個文件，然后在 HTML 中引入這些 JavaScript 文件就好了。
總結一下，使用 webpack 配置多頁應用的關鍵點在于：
將每個頁面中特有的 JavaScript 文件作為入口文件進行打包
在打包后，每個頁面中都需要引入這些打包后的文件
您可以在打包時進行公用代碼提取，然后在 HTML 文件中引入
說了這么多，其實就是利用了 webpack 多入口文件進行打包。
在使用 webpack 對 JavaScript 文件進行打包時，通常需要在打包的文件名中加一個 hash 字符串用來防止緩存，當我們修改了 JavaScript 代碼后，打包后的文件名也會發生變化。此時如果手動在 HTML 中引用這些 JavaScript 文件，是非常麻煩的。
因此，我們期望能自動生成 HTML 文件，并自動引用打包后的 JavaScript 文件。所謂自動生成 HTML 文件，可以理解為將源代碼的 HTML 復制到目標文件夾中，同時自動引用打包后的 JavaScript 文件。
要完成這項操作，就需要使用前面安裝的 html-webpack-plugin 這個插件。
首先，在我的項目中，有這么一些 HTML 頁面，將它們放在 html 文件夾中：
Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2017/9/5 18:04 1071 company_intro.html -a---- 2017/9/5 18:04 988 contact_us.html -a---- 2017/9/5 18:04 1131 cooperate.html -a---- 2017/9/5 18:04 1244 enterprise_culture.html -a---- 2017/9/5 18:04 1011 hornors.html -a---- 2017/9/5 18:04 1365 index.html -a---- 2017/9/5 18:04 1769 investment.html -a---- 2017/9/5 18:04 1005 join_us.html -a---- 2017/9/5 18:04 1037 news_center.html -a---- 2017/9/5 18:04 987 news_item.html -a---- 2017/9/5 18:04 1134 operate.html -a---- 2017/9/5 18:04 1255 product.html -a---- 2017/9/5 18:04 1132 schools.html
然后，把這些 HTML 文件名（不要后綴）都寫在 config.js 文件中，以供取用：
module.exports = {
HTMLDirs:[
"index",
"company_intro",
"enterprise_culture",
"hornors",
"news_center",
"news_item",
"product",
"schools",
"operate",
"cooperate",
"join_us",
"contact_us",
"investment"
],
}
HTMLDirs 是一個數組，其中保存了項目中會用到的所有 HTML 頁面。
接下來，每個 HTML 頁面都對應一份 JavaScript 代碼，因此在 js 文件夾中建立對應的 JavaScript 文件：
Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2017/9/5 18:04 2686 company_intro.js -a---- 2017/9/5 18:04 594 contact_us.js -a---- 2017/9/5 18:04 1725 cooperate.js -a---- 2017/9/8 16:54 3505 enterprise_culture.js -a---- 2017/9/5 18:04 2208 hornors.js -a---- 2017/9/8 16:54 4491 index.js -a---- 2017/9/5 18:04 3180 investment.js -a---- 2017/9/5 18:04 1327 join_us.js -a---- 2017/9/8 16:55 3689 news_center.js -a---- 2017/9/5 18:04 1972 news_item.js -a---- 2017/9/5 18:04 2728 operate.js -a---- 2017/9/5 18:04 2664 product.js -a---- 2017/9/5 18:04 2476 schools.js
這兩項是必須的，只有提供了每個頁面的 HTML 文件和對應的 JavaScript 文件，才能構建多頁面應用。
同時，可能每個頁面都有自己的樣式，因此您也可以在 css 文件夾中建立一些樣式文件：
Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2017/9/5 18:04 419 company_intro.css -a---- 2017/9/5 18:04 167 contact_us.css -a---- 2017/9/5 18:04 214 cooperate.css -a---- 2017/9/5 18:04 926 enterprise_culture.css -a---- 2017/9/5 18:04 255 hornors.css -a---- 2017/9/5 18:04 693 investment.css -a---- 2017/9/5 18:04 136 join_us.css -a---- 2017/9/5 18:04 541 news_center.css -a---- 2017/9/5 18:04 623 news_item.css -a---- 2017/9/5 18:04 342 operate.css -a---- 2017/9/5 18:04 236 product.css -a---- 2017/9/5 18:04 213 schools.css
關于建立樣式這一項，不是必須的。
最后，我們就可以使用 html-webpack-plugin 這個插件來自動生成 HTML 文件了，html-webpack-plugin 插件的用法如下：
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入多頁面文件列表
const { HTMLDirs } = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多頁面的集合
HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, "commons"],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
在上面的代碼中，首先引入了所需的插件和變量，然后利用 html-webpack-plugin 循環生成 HTML 頁面。
簡單說下 HTMLWebpackPlugin 構造函數的幾個參數：
filename：生成的 HTML 文件名，我這里選擇和原始文件名保持一致
template：生成 HTML 文件使用的模板，也就是我們之前在 html 文件夾中建立的那些文件
chunks：生成 HTML 文件時會自動插入相應的代碼片段（也就是 JavaScript 文件），我這里選擇插入每個頁面對應的 JavaScript 文件，以及最后提取出來的公共文件代碼塊。
關于 chunks 還需要說明一點，chunks 是一個數組，在生成 HTML 文件時會將數組中的對應的 JavaScript 片段自動插入到 HTML 中，這些片段也就是 webpack 打包時的 output 選項中的 [name]。這里只需要寫上 [name] 值就行了，無需使用打包生成的完整名稱，因為這會還沒開始打包呢，打包后生成的名稱咱也不知道。
最后，我們把這些生成 HTML 文件的配置插入到 HTMLPlugins 這個數組中，同時設置 webpack 的入口文件。
在這個腳手架中，我是這樣劃分項目結構的：
├─app
│ ├─css
│ ├─html
│ ├─img
│ ├─js
│ └─lib
├─config
└─dist
├─css
├─img
└─js
其中 app 是項目的源碼，config 是 webpack 相關的一些配置文件，dist 是存放打包后的文件，是由 webpack 自動生成的。
更詳細的文件結構如下：
│ .babelrc
│ .eslintrc.js
│ .gitignore
│ package.json
│ postcss.config.js
│ webpack.config.js
│
├─app
│ │ favicon.ico
│ │
│ ├─css
│ │ main.css
│ │
│ ├─html
│ │ index.html
│ │
│ │
│ ├─img
│ │ back.png
│ │
│ ├─js
│ │ ajax.js
│ │ footer.js
│ │ index.js
│ │ nav.js
│ │ public.js
│ │ tity_nav.js
│ │
│ └─lib
│ flexible.js
│ normalize.css
│ swiper.css
│ swiper.js
│
└─config
config.js
webpack.config.base.js
webpack.config.dev.js
webpack.config.lint.js
webpack.config.prod.js
package.json
所有的功能都是從 package.json 的 scripts 入口開始執行的，我想要腳手架有以下功能：
開發環境構建
生產環境構建
ESLint 代碼檢查環境
生產環境構建后的服務器預覽環境
在開發或代碼檢查環境，需要啟用 webpack-dev-server 命令，生產環境構建需要啟用 webpack 命令，預覽環境需要啟用 http-server 環境。
上文介紹時把 http-server 給落下了，您現在可以進行如下安裝：
npm install http-server --save-dev
scripts 命令行配置如下：
"scripts": {
"dev": "set NODE_ENV=dev && webpack-dev-server --open",
"build": "set NODE_ENV=prod && webpack -p",
"lint": "set NODE_ENV=lint && webpack-dev-server --open",
"serve": "http-server ./dist -p 8888 -o",
"serve2": "http-server ./dist -p 8888"
},
下面是整個 package.json 文件：
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "set NODE_ENV=dev && webpack-dev-server --open",
"build": "set NODE_ENV=prod && webpack -p",
"lint": "set NODE_ENV=lint && webpack-dev-server --open",
"serve": "http-server ./dist -p 8888 -o",
"serve2": "http-server ./dist -p 8888"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-preset-env": "^1.6.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"eslint": "^4.5.0",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"http-server": "^0.10.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
},
"dependencies": {}
}
啟用環境
如果您想啟用某個環境，需要使用 npm run xxx 命令：
npm run dev：進入開發環境
npm run build：進入生產環境
npm run lint：執行代碼檢查
npm run serve：服務器環境下預覽（打開瀏覽器）
npm run serve2：服務器環境下預覽（不打開瀏覽器）
默認情況下，使用這些命令都會先引入和 package.js 同目錄下的 webpack.config.js 文件。由于我們不會將所有的配置都放在 webpack.config.js 中，而是過環境變量進行區分，在 webpack.config.js 中引用其他的配置文件。
設置環境變量采用的語法：
set NODE_ENV=xxx
這里我們為開發、生產、代碼檢查和預覽這幾個環境設置了環境變量。
webpack.config.js
webpack.config.js 文件比較簡單，只有兩行代碼，其作用就是用來引用其他的配置文件：
// 獲取環境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace(/(s*$)|(^s*)/ig,"");
// 根據環境變量引用相關的配置文件
module.exports = require(`./config/webpack.config.${env}.js`)
webpack.config.base.js
webpack.config.base.js 是最基礎的配置文件，包含了這些環境都可能使用到的配置。
1）相關插件引入const path = require("path");
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 清理 dist 文件夾
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
#### 2）自動生成 HTML 的配置
// 引入多頁面文件列表
const config = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多頁面的集合
config.HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, "commons"],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
3）主配置文件一覽
module.exports = {
// 入口文件
entry:Entries,
// 啟用 sourceMap
devtool:"cheap-module-source-map",
// 輸出文件
output:{},
// 加載器
module:{
rules:[
],
},
// 插件
plugins:[],
}
4）配置 css 加載器
{
// 對 css 后綴名進行處理
test:/.css$/,
// 不處理 node_modules 文件中的 css 文件
exclude: /node_modules/,
// 抽取 css 文件到多帶帶的文件夾
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// 設置 css 的 publicPath
publicPath: config.cssPublicPath,
use: [{
loader:"css-loader",
options:{
// 開啟 css 壓縮
minimize:true,
}
},
{
loader:"postcss-loader",
}
]
})
},
這里有兩點需要說明：
A.publicPath：在 css 中設置背景圖像的 url 時，經常會找不到圖片（默認會在 css 文件所在的文件夾中尋找），這里設置 extract-text-webpack-plugin 插件的 publicPath 為圖片文件夾所在的目錄，就可以順利找到圖片了。
在 config.js 中，設置 cssPublicPath 的值：
cssPublicPath:"../"
B.postcss 我主要用來自動添加 css 前綴以及一點美化操作，在使用 postcss 時，需要在 postcss.config.js 中進行配置：
module.exports = {
plugins: {
"autoprefixer": {
browsers: ["last 5 version","Android >= 4.0"],
//是否美化屬性值 默認：true
cascade: true,
//是否去掉不必要的前綴 默認：true
remove: true
}
}
}
5）配置 js 加載器
js 加載器的配置如下：
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
6）配置圖片加載器
圖片加載器的配置如下：
{
test: /.(png|svg|jpg|gif)$/,
use:{
loader:"file-loader",
options:{
// 打包生成圖片的名字
name:"[name].[ext]",
// 圖片的生成路徑
outputPath:config.imgOutputPath
}
}
},
outputPath 規定了輸出圖片的位置，默認情況下，圖片在打包時會和所有的 HTML/CSS/JS 文件打包到一起，通過設置 outputPath 值可以將所有的圖片都打包到一個多帶帶的文件中。
設置 config.js 的 imgOutputPath：
imgOutputPath:"img/",
在打包時，會將所有的圖片打包到 dist 文件夾下的 img 文件夾中。
自定義字體加載器的配置如下：
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
8）插件配置
插件配置如下：
plugins:[
// 自動清理 dist 文件夾
new CleanWebpackPlugin(["dist"]),
// 將 css 抽取到某個文件夾
new ExtractTextPlugin(config.cssOutputPath),
// 自動生成 HTML 插件
...HTMLPlugins
],
同打包圖片，在抽取 css 時也可以指定抽取的目錄，只需將路徑傳入 extract-text-webpack-plugin 插件的構造函數中。
配置 config.js 的 cssOutputPath 選項：
cssOutputPath:"./css/styles.css",
這里將所有的 css 提取到 dist 文件夾下的 css 文件夾中，并命名為 style.css。
webpack.config.base.js 詳細配置
下面是 webpack.config.base.js 的詳細配置文件：
const path = require("path");
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 清理 dist 文件夾
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 引入多頁面文件列表
const config = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多頁面的集合
config.HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, "commons"],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
module.exports = {
entry:Entries,
devtool:"cheap-module-source-map",
output:{
filename:"js/[name].bundle.[hash].js",
path:path.resolve(__dirname,"../dist")
},
// 加載器
module:{
rules:[
{
// 對 css 后綴名進行處理
test:/.css$/,
// 不處理 node_modules 文件中的 css 文件
exclude: /node_modules/,
// 抽取 css 文件到多帶帶的文件夾
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// 設置 css 的 publicPath
publicPath: config.cssPublicPath,
use: [{
loader:"css-loader",
options:{
// 開啟 css 壓縮
minimize:true,
}
},
{
loader:"postcss-loader",
}
]
})
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /.(png|svg|jpg|gif)$/,
use:{
loader:"file-loader",
options:{
// 打包生成圖片的名字
name:"[name].[ext]",
// 圖片的生成路徑
outputPath:config.imgOutputPath
}
}
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
],
},
plugins:[
// 自動清理 dist 文件夾
new CleanWebpackPlugin(["dist"]),
// 將 css 抽取到某個文件夾
new ExtractTextPlugin(config.cssOutputPath),
// 自動生成 HTML 插件
...HTMLPlugins
],
}
webpack.config.dev.js
這個配置文件主要用來在開發環境使用，需要 webpack-dev-server 這個插件提供支持。該文件的配置如下：
// 引入基礎配置文件
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入配置文件
const config = require("./config");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
// 配置 webpack-dev-server
devServer:{
// 項目根目錄
contentBase:config.devServerOutputPath,
// 錯誤、警告展示設置
overlay:{
errors:true,
warnings:true
}
}
});
其中，webpack-merge 這個插件用來對配置文件進行合并，在 webpack.config.base.js 的基礎上合并新的配置。
devServer 配置項的 contentBase 項是項目的根目錄，也就是我們的 dist 目錄，區別在于這個 dist 目錄不是硬盤上的 dist 目錄，而是存在于內存中的 dist 目錄。在使用 webpack-dev-server 時，將會以這個內存中的 dist 目錄作為根目錄。
devServer 的 overlay 選項中設置了展示錯誤和警告，這樣當代碼發生錯誤時，會將錯誤信息投射到瀏覽器上，方便我們開發。
這里將 contentBase 指向了 config 中的一個配置：
devServerOutputPath:"../dist", webpack.config.prod.js
該配置文件用來在生產環境啟用，主要用來壓縮、合并和抽取 JavaScript 代碼，并將項目文件打包至硬盤上的 dist 文件夾中。
// 引入基礎配置
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入 webpack
const webpack = require("webpack");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
plugins:[
// 代碼壓縮
new webpack.optimize.UglifyJsPlugin({
// 開啟 sourceMap
sourceMap: true
}),
// 提取公共 JavaScript 代碼
new webpack.optimize.CommonsChunkPlugin({
// chunk 名為 commons
name: "commons",
filename: "[name].bundle.js",
}),
]
});
在抽取公共的 JavaScript 代碼時，我們將公共代碼抽取為 commons.bundle.js，這個公共代碼的 chunk（name）名就是 commons，在使用 html-webpack-plugin 自動生成 HTML 文件時會引用這個 chunk。
webpack.config.lint.js
這項配置用來進行代碼檢查，配置如下：
const webpackBase = require("./webpack.config.base");
const webpackMerge = require("webpack-merge");
const config = require("./config");
module.exports = webpackMerge(webpackBase,{
module:{
rules:[
{
test: /.js$/,
// 強制先進行 ESLint 檢查
enforce: "pre",
// 不對 node_modules 和 lib 文件夾中的代碼進行檢查
exclude: /node_modules|lib/,
loader: "eslint-loader",
options: {
// 啟用自動修復
fix:true,
// 啟用警告信息
emitWarning:true,
}
},
]
},
devServer:{
contentBase:config.devServerOutputPath,
overlay:{
errors:true,
warnings:true
}
}
});
在使用 eslint-loader 時，我們設置了 enforce:"pre" 選項，這個選項表示在處理 JavaScript 之前先啟用 ESLint 代碼檢查，然后再使用 babel 等 loader 對 JavaScript 進行編譯。
在 eslint-loader 的 options 選項中，設置了自動修復和啟用警告信息，這樣當我們的代碼出現問題時，ESLint 會首先嘗試自動修復（如將雙引號改為單引號），對于無法自動修復的問題，將以警告或錯誤的信息進行展示。
要想使用 ESLint 進行代碼檢查，除了使用 eslint-loader 之外，還需針對 ESLint 本身進行配置，這就需要一個 .eslintrc.js 文件。該文件的配置如下：
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
extends: "eslint:recommended",
parserOptions: {
sourceType: "module",
},
rules: {
"comma-dangle": ["error", "always-multiline"],
indent: ["error", 2],
"linebreak-style": ["error", "unix"],
quotes: ["error", "single"],
semi: ["error", "always"],
"no-unused-vars": ["warn"],
"no-console": 0,
},
};
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "set NODE_ENV=dev && webpack-dev-server --open",
"build": "set NODE_ENV=prod && webpack -p",
"lint": "set NODE_ENV=lint && webpack-dev-server --open",
"serve": "http-server ./dist -p 8888 -o",
"serve2": "http-server ./dist -p 8888"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-preset-env": "^1.6.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"eslint": "^4.5.0",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"http-server": "^0.10.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
},
"dependencies": {}
}
.gitignore
node_modules
dist
npm-debug.log
.babelrc
{
"plugins": ["transform-es2015-spread"]
}
.eslintrc.js
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
extends: "eslint:recommended",
parserOptions: {
sourceType: "module",
},
rules: {
"comma-dangle": ["error", "always-multiline"],
indent: ["error", 2],
"linebreak-style": ["error", "unix"],
quotes: ["error", "single"],
semi: ["error", "always"],
"no-unused-vars": ["warn"],
"no-console": 0,
},
};
postcss.config.js
module.exports = {
plugins: {
"autoprefixer": {
browsers: ["last 5 version","Android >= 4.0"],
//是否美化屬性值 默認：true
cascade: true,
//是否去掉不必要的前綴 默認：true
remove: true
}
}
}
config.js
module.exports = {
HTMLDirs:[
"index",
"company_intro",
"enterprise_culture",
"hornors",
"news_center",
"news_item",
"product",
"schools",
"operate",
"cooperate",
"join_us",
"contact_us",
"investment"
],
cssPublicPath:"../",
imgOutputPath:"img/",
cssOutputPath:"./css/styles.css",
devServerOutputPath:"../dist",
}
webpack.config.js
// 獲取環境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace(/(s*$)|(^s*)/ig,"");
// 根據環境變量引用相關的配置文件
module.exports = require(`./config/webpack.config.${env}.js`)
webpack.config.base.js
const path = require("path");
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 清理 dist 文件夾
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 引入多頁面文件列表
const config = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多頁面的集合
config.HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../app/html/${page}.html`),
chunks: [page, "commons"],
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);
})
module.exports = {
entry:Entries,
devtool:"cheap-module-source-map",
output:{
filename:"js/[name].bundle.[hash].js",
path:path.resolve(__dirname,"../dist")
},
// 加載器
module:{
rules:[
{
// 對 css 后綴名進行處理
test:/.css$/,
// 不處理 node_modules 文件中的 css 文件
exclude: /node_modules/,
// 抽取 css 文件到多帶帶的文件夾
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// 設置 css 的 publicPath
publicPath: config.cssPublicPath,
use: [{
loader:"css-loader",
options:{
// 開啟 css 壓縮
minimize:true,
}
},
{
loader:"postcss-loader",
}
]
})
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /.(png|svg|jpg|gif)$/,
use:{
loader:"file-loader",
options:{
// 打包生成圖片的名字
name:"[name].[ext]",
// 圖片的生成路徑
outputPath:config.imgOutputPath
}
}
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use:["file-loader"]
}
],
},
plugins:[
// 自動清理 dist 文件夾
new CleanWebpackPlugin(["dist"]),
// 將 css 抽取到某個文件夾
new ExtractTextPlugin(config.cssOutputPath),
// 自動生成 HTML 插件
...HTMLPlugins
],
}
webpack.config.dev.js
// 引入基礎配置文件
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入配置文件
const config = require("./config");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
// 配置 webpack-dev-server
devServer:{
// 項目根目錄
contentBase:config.devServerOutputPath,
// 錯誤、警告展示設置
overlay:{
errors:true,
warnings:true
}
}
});
webpack.config.prod.js
// 引入基礎配置
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入 webpack
const webpack = require("webpack");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
plugins:[
// 代碼壓縮
new webpack.optimize.UglifyJsPlugin({
// 開啟 sourceMap
sourceMap: true
}),
// 提取公共 JavaScript 代碼
new webpack.optimize.CommonsChunkPlugin({
// chunk 名為 commons
name: "commons",
filename: "[name].bundle.js",
}),
]
});
webpack.config.lint.js
const webpackBase = require("./webpack.config.base");
const webpackMerge = require("webpack-merge");
const config = require("./config");
module.exports = webpackMerge(webpackBase,{
module:{
rules:[
{
test: /.js$/,
// 強制先進行 ESLint 檢查
enforce: "pre",
// 不對 node_modules 和 lib 文件夾中的代碼進行檢查
exclude: /node_modules|lib/,
loader: "eslint-loader",
options: {
// 啟用自動修復
fix:true,
// 啟用警告信息
emitWarning:true,
}
},
]
},
devServer:{
contentBase:config.devServerOutputPath,
overlay:{
errors:true,
warnings:true
}
}
});
項目結構
│ .babelrc
│ .eslintrc.js
│ .gitignore
│ package.json
│ postcss.config.js
│ webpack.config.js
│
├─app
│ │ favicon.ico
│ │
│ ├─css
│ │ main.css
│ │
│ ├─html
│ │ index.html
│ │
│ │
│ ├─img
│ │ back.png
│ │
│ ├─js
│ │ ajax.js
│ │ footer.js
│ │ index.js
│ │ nav.js
│ │ public.js
│ │ tity_nav.js
│ │
│ └─lib
│ flexible.js
│ normalize.css
│ swiper.css
│ swiper.js
│
└─config
config.js
webpack.config.base.js
webpack.config.dev.js
webpack.config.lint.js
webpack.config.prod.js
注釋：
想引用jquery而不是每個頁面都引用只需要：
引入jquery后如果開啟lint檢查模式 可以正常使用的前提是每個頁面都require 一次
webpack.config.base.js
cnpm i jquery --save
const ProvidePlugin = new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
});
引入sass
webpack.config.base.js
{
// s?css => scss或者css
test:/.s?css$/,
// 不處理 node_modules 文件中的 css 文件
exclude: /node_modules/,
// 抽取 css 文件到多帶帶的文件夾
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// 設置 css 的 publicPath
publicPath: config.cssPublicPath,//在 css 中設置背景圖像的 url 時，經常會找不到圖片（默認會在 css 文件所在的文件夾中尋找），這里設置 extract-text-webpack-plugin 插件的 publicPath 為圖片文件夾所在的目錄，就可以順利找到圖片了
use: [{
loader:"css-loader",
options:{
// 開啟 css 壓縮
minimize:true,
}
},
{
loader:"postcss-loader",
},
{
loader:"sass-loader",
//啟用sass 雖然在這只寫了sass-loader 但還要下載node-sass
}
]
})
},
如果import了類似swiper這種庫函數 但不處理modules里面的swiper,所以這里要允許除了node_modules里面的swiper的其他所有文件
webpack.config.base.js
{
test: /.js$/,
exclude: /^node_modules*swiper$/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
? github地址：點我
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100539.html
摘要：所以，打包工具就出現了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發布時間為順序。它定位是模塊打包器，而屬于構建工具。而且在其他的打包工具在處理非網頁文件比如等基本還是需要借助它來實現。 本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。 前端的打包工具 打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關系...
摘要：初始化項目官方文檔項目地址項目搭建簡單記錄一下命令，網上有很多文章不多做介紹。希望可以提供一個基礎的架構。 初始化項目 webpack官方文檔：https://www.webpackjs.com/con...github項目地址：https://github.com/Zhanghongw... 項目搭建簡單記錄一下命令，網上有很多文章不多做介紹。希望可以提供一個基礎的架構。 持續更新....
摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...
摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...
項目框架 基礎框架：https://segmentfault.com/a/11...使用之前 webpack 搭建的框架。 項目源碼 github 地址：https://github.com/Zhanghongw... 頁面開發 地址：https://segmentfault.com/a/11...
閱讀 2928·2021-11-04 16:06
閱讀 767·2021-09-30 09:56
閱讀 1830·2021-09-22 10:02
閱讀 2612·2019-08-29 13:43
閱讀 2198·2019-08-29 13:42
閱讀 2288·2019-08-29 12:21
閱讀 1037·2019-08-29 11:29
閱讀 1375·2019-08-26 13:51
