webpack生產環境基本配置
轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生產環境基本配置
直接上
webpack的配置文件webpack.config.js
這里增加了自定義js、imgs、media等目錄。
各類型資源的配置說明參見后續相關章節。
一、安裝所需的npm包
# 需要用npm安裝的依賴包
> npm i webpack@4.41.6 webpack-cli@3.3.11 style-loader@1.1.3 css-loader@3.4.2 less-loader@5.0.0 less@3.11.1 html-webpack-plugin@4.5.2 file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 webpack-dev-server@3.10.3 mini-css-extract-plugin@0.9.0 postcss-loader@3.0.0 postcss-preset-env@6.7.0 optimize-css-assets-webpack-plugin@5.0.3 eslint@7.32.0 eslint-config-airbnb-base@15.0.0 eslint-loader@4.0.2 eslint-plugin-import@2.28.1 babel-loader@8.3.0 @babel/preset-env@7.14.7 @babel/core@7.14.6 @babel/polyfill@7.12.1 core-js@3.32.1 -D
二、webpack.config.js webpack的配置文件詳解
/*
開發環境配置，能讓代碼運行。
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)
所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
loader: 1.下載 2.使用(配置loader)
plugins: 1.下載2. 引入 3.使用
路徑： ./webpack.config.js
*/
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入壓縮 css 的插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 設置 nodejs 環境變量,決定使用‘browserslist‘的哪個環境
// process.env.NODE_ENV = 'development';
// 復用 loader
const commonCssLoader = [
// use數組中loader執行順序:從右到左,從下到上依次執行
// 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
// 'style-loader',
// 這個loader取代style-loader。作用:提取js中的css成單獨文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 這里可以指定一個 publicPath
// 默認使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
// 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
'css-loader',
/*
css兼容性處理: postcss --> postcss-loader postcss-preset-env
postcss-preset-env的作用是幫postcss找到package.json中browserslist里面的配置,
通過配置加載指定的css兼容性樣式，可以在 github上找到 browserslist 的更多配置。
以下舉例應該在package.json 配置的內容。
========package.json 文件 begin=========
"browserslist":{
//開發環境-->設置node環境變量: process.env.NODE_ENV = development
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9-12"
],
//生產環境：默認是生產環境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
},
========package.json 文件 end=========
*/
//使用loader的默認配置
//'postcss-loader"
//修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/js/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'js/built.js',
// 輸出路徑
// __dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
// 打包 css 文件的詳細loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader進行處理
use: [...commonCssLoader],
},
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader進行處理
use: [
...commonCssLoader,
//將less文件編譯成css文件
//需要下載less-loader和less
'less-loader'
]
},
/*
語法檢查: eslint-loader eslint
注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
設置檢查規則:
airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint
在package.json中eslintConfig中設置
"eslintConfig": {
"extends": "airbnb-base"
}
*/
{
test: /\.js$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
exclude: /node_modules/,
loader: 'eslint-loader',
/*
1. pre 優先處理
2. normal 正常處理（默認）
3. inline 其次處理
4. post 最后處理
*/
enforce: 'pre',
options: {
// 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine
// 自動修復eslint的錯誤
fix: true,
},
},
/*
js兼容性處理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性處理 @babel/preset-env
問題：只能轉換基本語法，如promise不能轉換
2．全部js兼容性處理 --> @babel/polvfill
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
3. 需要做兼容性處理的就做：按需加載 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [
[
"@babel/preset-env",
{
// 按需加載
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪個版本的瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
{
// 問題：默認處理不了 html 中的 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個loader
// 下載url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb,就會被base64處理
// 優點:減少請求數量(減輕服務器壓力)
// 缺點:圖片體積會更大(文件請求速度更慢)
limit: 8 * 1024,
// 問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
// 解析時會出問題: [object Module]
// 解決:關閉url-loader的es6模塊化,使用commonjs解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10].[ext]',
// 設置輸出目錄，將打包的圖片資源放到imgs文件夾
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
loader: 'html-loader',
options:
{
// 默認情況下,生成使用ES塊語法的Js模塊
// 問題:生成的圖片顯示錯誤
// 解決: esModule改為false
esModule: false,
},
},
{
// 打包其他資源(除了html/js/css資源以外的資源)
// 排除css/is/html資源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 給資源進行重命名
// [hash:10]取資源的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10]. [ext]',
// 設置輸出目錄，將打包的其他資源放到media 文件夾
outputPath: './media',
},
},
],
},
// plugins的配置
plugins: [
// 詳細的plugins配置
// html-webpack-plugin
// 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
// 需求:需要有結構的HTML文件
new HtmlWebpackPlugin({
// 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html',
//壓縮 html 代碼
minify: {
//移除空格
collapseWhitespace: true,
//移除注釋
removeComments: true
}
}),
new MiniCssExtractPlugin({
//對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
}),
// 壓縮 css
new OptimizeCssAssetsWebpackPlugin(),
],
// 模式 development 開發環境，production 生產環境
// mode: 'development',
// 生產環境下會自動壓縮js代碼
mode: 'production',
// 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
// 特點:只會在內存中編譯打包,不會有任何輸出
// 啟動devServer指令為: npx webpack-dev-server
devServer: {
// 項目構建后路徑
contentBase: resolve(__dirname, 'build'),
// 啟動gzip壓縮
compress: true,
// 端口號
port: 3000,
// 自動打開瀏覽器
open: true,
},
};
三、去除webpack.config.js配置文件過多的注釋
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 設置 nodejs 環境變量,決定使用‘browserslist‘的哪個環境
// process.env.NODE_ENV = 'development';
// 復用 loader
const commonCssLoader = [
{
loader: MiniCssExtractPlugin.loader,
options: {
// 這里可以指定一個 publicPath
// 默認使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/js/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'js/built.js',
// 輸出路徑
// __dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
// 打包 css 文件的詳細loader配置
{
test: /\.css$/,
use: [...commonCssLoader],
},
//打包less 文件的詳細loader配置
{
test: /\.less$/,
use: [
...commonCssLoader,
'less-loader'
]
},
/*
語法檢查: eslint-loader eslint
注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
*/
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
/*
1. pre 優先處理
2. normal 正常處理（默認）
3. inline 其次處理
4. post 最后處理
*/
enforce: 'pre',
options: {
// 自動修復eslint的錯誤
fix: true,
},
},
/*
js兼容性處理
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [
[
"@babel/preset-env",
{
// 按需加載
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪個版本的瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
{
// 問題：默認處理不了 html 中的 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 圖片大小小于8kb,就會被base64處理
limit: 8 * 1024,
// 解決:關閉url-loader的es6模塊化,使用commonjs解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10].[ext]',
// 設置輸出目錄，將打包的圖片資源放到imgs文件夾
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
loader: 'html-loader',
options:
{
// 解決: esModule改為false
esModule: false,
},
},
{
// 打包其他資源(除了html/js/css資源以外的資源)
// 排除css/is/html資源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 給資源進行重命名
// [hash:10]取資源的hash的前10位
// [ext]取文件原來擴展名
name: '[hash:10]. [ext]',
// 設置輸出目錄，將打包的其他資源放到media 文件夾
outputPath: './media',
},
},
],
},
// plugins的配置
plugins: [
new HtmlWebpackPlugin({
// 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html',
//壓縮 html 代碼
minify: {
//移除空格
collapseWhitespace: true,
//移除注釋
removeComments: true
}
}),
new MiniCssExtractPlugin({
//對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
}),
// 壓縮 css
new OptimizeCssAssetsWebpackPlugin(),
],
// 模式 development 開發環境，production 生產環境
// mode: 'development',
// 生產環境下會自動壓縮js代碼
mode: 'production',
// 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
// 啟動devServer指令為: npx webpack-dev-server
devServer: {
// 項目構建后路徑
contentBase: resolve(__dirname, 'build'),
// 啟動gzip壓縮
compress: true,
// 端口號
port: 3000,
// 自動打開瀏覽器
open: true,
},
};
四、package.json 文件
{
"name": "notes_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "eword <eword@eword.name> (http://www.eword.name/)",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"babel-loader": "^8.3.0",
"core-js": "^3.32.1",
"css-loader": "^3.4.2",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.28.1",
"file-loader": "^5.0.2",
"find-cache-dir": "^5.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.2",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^1.1.3",
"uninstall": "0.0.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9-12"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base"
}
}
五、工程目錄
.
├── build
│ ├── css
│ │ ├── 1.css
│ │ └── 2.css
│ ├── imgs
│ │ ├── 32de6ca13b.jpg
│ │ ├── 5e7e5c80c7.jpg
│ │ └── ae7bf15c0d.jpg
│ ├── index.html
│ ├── js
│ │ ├── 1.built.js
│ │ ├── 2.built.js
│ │ └── built.js
│ └── media
│ └── cffec944b5. ttf
├── src
│ ├── css
│ │ ├── iconfont.css
│ │ └── index.less
│ ├── imgs
│ │ ├── img.jpg
│ │ ├── img1.jpg
│ │ ├── img2.jpg
│ │ └── img3.jpg
│ ├── index.html
│ ├── js
│ │ ├── iconfont.js
│ │ └── index.js
│ └── media
│ ├── iconfont.json
│ └── iconfont.ttf
└── webpack.config.js
浙公網安備 33010602011771號