前提是對(duì)webpack有初步的認(rèn)識(shí)概述、使用。
1.webpack4的webpack.config.js的配置框架
module.export={
entry:'',//入口
output:'',//打包出口
devServer:{},//開(kāi)發(fā)服務(wù)器
module:{},//模塊配置
plugins:[],//插件的配置
mode:''//更改模式（開(kāi)發(fā)模式钢属、線上模式）
resolve:{}//配置解析
}
每次修改代碼都要重新打包、打包后都要找到html文件寇漫，然后打開(kāi)瀏覽器是很耗時(shí)的啄刹，于是有了devServer繁成。
2.配置開(kāi)發(fā)服務(wù)器（devServer）
- 能夠在本地開(kāi)啟服務(wù)毕源，
- 能夠進(jìn)行服務(wù)器壓縮浪漠，
- 能自動(dòng)打開(kāi)瀏覽器，
- 能夠監(jiān)聽(tīng)你的代碼的修改霎褐，并自動(dòng)刷新顯示修改后的結(jié)果
- devServer的配置
安裝： npm i webpack-dev-server –D
devServer:{
contentBase:path.resolve(__dirname,'dist'),// 配置開(kāi)發(fā)服務(wù)運(yùn)行時(shí)的文件根目錄 （把出口js打包到dist文件夾下，運(yùn)行目錄就是dist）
host:'localhost',//開(kāi)發(fā)服務(wù)器監(jiān)聽(tīng)的主機(jī)地址
compress:true,//開(kāi)發(fā)服務(wù)器是否啟動(dòng)gzip等壓縮
port:3000,//開(kāi)發(fā)服務(wù)器監(jiān)聽(tīng)的端口
open:true,// 自動(dòng)打開(kāi)瀏覽器
// hot:true//開(kāi)啟模塊熱替換（此項(xiàng)配置需要插件配合该镣，請(qǐng)繼續(xù)閱讀下文）
}冻璃，
每次打包，開(kāi)啟一個(gè)開(kāi)發(fā)服務(wù)器devServer损合，都要輸入一大段的代碼省艳，很麻煩，那就需要簡(jiǎn)化命令嫁审。
3.命令行的簡(jiǎn)化
修改pack.json文件中的scripts配置即可自定義執(zhí)行命令
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
這樣
- 在命令行輸入 npm run build 相當(dāng)于執(zhí)行了對(duì)應(yīng)的webpack打包跋炕。
- 在命令行輸入 npm run start相當(dāng)于執(zhí)行了對(duì)應(yīng)的webpack-dev-server開(kāi)啟了一個(gè)開(kāi)發(fā)服務(wù)器。
如果不知道打包后js的名字律适，所以一旦打包后的名字改變辐烂，那么就需要手動(dòng)的修改html的script的src的地址遏插，這樣是很耗時(shí)的，所以webpack提供了自動(dòng)產(chǎn)出HTML文件的功能纠修，并在里邊引入打包后的js文件
4.自動(dòng)產(chǎn)出html文件插件 （html-webpack-plugin）
如果你有這么一個(gè)疑問(wèn)：html文件如果有很多內(nèi)容的情況下胳嘲，怎么能自動(dòng)產(chǎn)出呢？
-
沒(méi)關(guān)系：我們只需要一個(gè)html文件的作為模板即可解決（一般作為一個(gè)VUE單頁(yè)面應(yīng)用的話扣草，html文件中有一個(gè)<div id="app"></div>元素就夠了）
html模板一般是這種情況的<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title><%=htmlWebpackPlugin.options.title%></title> <!--動(dòng)態(tài)的title了牛，對(duì)應(yīng)下文配置中的title屬性--> <link type="text/css" href="./src/assets/css/common.css"> </head> <body> <div id="app"></div> </body> </html> -
html-webpack-plugin的配置說(shuō)明
安裝： npm i html-webpack-plugin 引入插件：let HtmlWebpackPlugin = require('html-webpack-plugin'); ***（插件都是面向?qū)ο蟮念?lèi)，所以插件的配置都需要new 一個(gè)它的實(shí)例）*** plugins:[ new HtmlWebpackPlugin({ filename:'a.html',//自動(dòng)生成的html文件的名字（不配置此項(xiàng)的話辰妙，默認(rèn)為模板的名字index.html） template:'./src/index.html',//模板的路徑 title:'新生成的html的title',//此配置需要模板html的配合：<title><%=htmlWebpackPlugin.options.title%></title> hash:true,//為了防止緩存可以給生成的html文件引入的js加上hash值（需要出口文件的配合） //chunks: ['index']//chunks 選項(xiàng)的作用主要是針對(duì)多入口(entry)文件鹰祸。當(dāng)你有多個(gè)入口文件的時(shí)候，對(duì)應(yīng)就會(huì)生成多個(gè)編譯后的 js 文件密浑。那么 chunks 選項(xiàng)就可以決定是否都使用這些生成的 js 文件蛙婴。(此處先不做配置) }), ],
以下是生成在build文件夾（output路徑）下的a.html和對(duì)應(yīng)帶有hash的build.js文件。
QQ圖片20180507160953.png
因?yàn)閔ash的原因肴掷，所以每次都會(huì)產(chǎn)生一個(gè)不同hash的js文件敬锐，所以需要我們，每生成一個(gè)html文件之前都消滅之前生成的js文件呆瞻。
5.自動(dòng)清除文件插件（clean-webpack-plugin）
他能清除一個(gè)文件夾下的所有文件(防止產(chǎn)生的帶有不同hash值的js文件太多)
單入口文件的自動(dòng)產(chǎn)出html文件示例：
let path = require('path');
+ let HtmlWebpackPlugin = require('html-webpack-plugin');
+ let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:'./src/index.js', // 入口
output:{//出口
+ filename:'build.[hash:8].js',//[hash:8]代表有8個(gè)隨機(jī)數(shù)的hash值
path: path.resolve('./build')
},
/*devServer:{
contentBase:'./build',
port:3000,
compress:true,// 服務(wù)器壓縮
open:true,// 自動(dòng)打開(kāi)瀏覽器
// hot:true
},// 開(kāi)發(fā)服務(wù)器*/
module:{}, // 模塊配置
plugins:[
// 打包html插件
+ new CleanWebpackPlugin(['./build']),//清除build下的所有文件
+ new HtmlWebpackPlugin({
filename:'a.html',
template:'./src/index.html',
title:'新生成的html的title',
hash:true
// minify:{
// removeAttributeQuotes:true,//移除生成的html文件中的無(wú)用引號(hào)
// collapseWhitespace:true//移除生成的html文件中的無(wú)用空格
// }
})
],
mode:'development', // 可以更改模式
resolve:{}, // 配置解析
}
6.對(duì)于多頁(yè)面應(yīng)用自動(dòng)產(chǎn)出html的處理（多入口台夺，多出口）
- 關(guān)鍵點(diǎn)
- 入口配置
- 出口配置
- HtmlWebpackPlugin插件的chunks配置
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{ // 多入口 多出口
index:'./src/index.js',
a:'./src/a.js'
},
output:{
filename:'[name].[hash:8].js',
path: path.resolve('./build')
},
devServer:{
contentBase:'./build',
port:3000,
compress:true,
open:true
},
module:{},
plugins:[
new CleanWebpackPlugin(['./build']),
new HtmlWebpackPlugin({
filename:'a.html',//在./build目錄下生成一個(gè)a.html
template:'./src/index.html',
title:'',
hash:true,
chunks: ['index']//生成的a.html中引入index.js出口打包后的帶hash的js文件
}),
new HtmlWebpackPlugin({
filename:'b.html',//在./build目錄下生成一個(gè)b.html
template: './src/index.html',
title: '',
hash: true,
chunks:['a']//生成的b.html中引入a.js出口打包后的帶hash的js文件
})
],
mode:'development',
resolve:{},
}
生成的b.html引入a.1c103022.js
生成的a.html引入index.1c103022.js
image.png
7.用loader加載css文件
因?yàn)閣ebpack只識(shí)別js，所以css文件和圖片等都需要用加載器進(jìn)行編譯痴脾。
- 一般的css處理（將js中引入的css文件當(dāng)做行內(nèi)樣式盡心引入）
安裝 npm i style-loader css-loader -D
配置加載器 :
module: {
rules:[
{
test:/\.css$/,//匹配所有的以.css結(jié)尾的文件
use:['style-loader','css-loader'],//使用加載器
include:path.join(__dirname,'./src'),//處理這個(gè)文件夾下的文件
exclude:/node_modules/,//不處理這個(gè)文件夾下的文件
}
]
},
index.js中引入./index.css: import './index.css'; 打包解析后的頁(yè)面結(jié)構(gòu):
image.png
8.編譯less 和 sass
安裝：
npm i less less-loader -D
npm i node-saas sass-loader -D
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
}, {
loader: "css-loader" //將 CSS 轉(zhuǎn)化成 CommonJS 模塊
}, {
loader: "less-loader" // 將 less編譯成 CSS
}]
},//sass解析方式和less一致
]
}
9.把編譯的樣式抽離成單獨(dú)的css文件（extract-text-webpack-plugin）
以上的編譯方式會(huì)把所有的樣式都寫(xiě)到html文件的行內(nèi)樣式颤介，會(huì)顯得html文件過(guò)于臃腫，所以需要把css分離出來(lái)(改為在html文件中用link引入)
- css 文件抽離插件配置
安裝：npm install --save-dev extract-text-webpack-plugin
引入：let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
配置
{//編譯并抽離引入的css文件
test:/\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{//編譯并抽離引入的less文件
test: /\.less$/, use: ExtractTextWebpackPlugin.extract({
use:[
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
...
plugins: [
new ExtractTextWebpackPlugin('css/index.css'),//抽離成一個(gè)文件
]
10.處理CSS3屬性前綴
- 為了瀏覽器的兼容性赞赖，有時(shí)候我們必須加入-webkit,-ms,-o,-moz這些前綴
- Trident內(nèi)核：主要代表為IE瀏覽器, 前綴為-ms
- Gecko內(nèi)核：主要代表為Firefox, 前綴為-moz
- Presto內(nèi)核：主要代表為Opera, 前綴為-o
- Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari, 前綴為-webkit
- 配置
- 安裝：npm i postcss-loader autoprefixer -D
- 新建postcss.config.js ：
module.exports={
plugins:[require('autoprefixer')]
}
- webpack.config.js配置
const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')//引入抽離的插件
.....
{
test:/\.css$/,
use: cssExtract.extract({
use:['css-loader','postcss-loader']//使用postcss-loader加載器補(bǔ)全前綴
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
.....
plugins: [
new ExtractTextWebpackPlugin('css/index.css'),//抽離成css/index.css
]
當(dāng)引入公共css時(shí)滚朵，或者bootstrap這種css文件時(shí)，好多的樣式是用不到的前域，所以需要把多余的樣式刪掉辕近，簡(jiǎn)化代碼。
11.刪除沒(méi)用的css樣式（purifycss-webpack）
安裝：npm i purifycss-webpack -D
引入：let PurifycssWebpack = require('purifycss-webpack');
let glob = require('glob');//匹配路徑的模塊
配置：
// 沒(méi)用的css會(huì)被消除掉匿垄，一定放在htmlwebpackPlugin后面
new PurifycssWebpack({
paths:glob.sync(path.resolve('src/*.html'))//匹配所有的src下的html文件移宅，刪除多余的樣式
})
12.編譯圖片
配置完 css樣式，less椿疗，sass抽離漏峰、壓縮、加前綴等届榄，接下來(lái)要處理關(guān)于圖片的問(wèn)題浅乔。
- file-loader 解決CSS等文件中的引入圖片路徑問(wèn)題
- url-loader 當(dāng)圖片較小的時(shí)候會(huì)把圖片BASE64編碼，大于limit參數(shù)的時(shí)候還是使用file-loader 進(jìn)行拷貝
安裝
npm i file-loader url-loader -D
入口文件js引入圖片
用 require：
let userImg=require('./images/userImg.png')
console.log(userImg)//base64格式的亂碼
let img=new Image();
img.src=userImg;
document.body.appendChild(img);
處理打包后圖片路徑問(wèn)題
const PUBLIC_PATH='/';
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath:PUBLIC_PATH //打包后訪問(wèn)資源的基準(zhǔn)路徑
},
配置：
{
test:/\.(jpg|png|gif|svg)$/,
use:'url-loader',
include:path.join(__dirname,'./src'),
exclude:/node_modules/,
options: {
limit: 1024,//小于1M編碼成base64方式引入圖片
outputPath:'images/'//指定打包后的圖片位置
}
}
在HTML文件中引入圖片的情況處理
安裝：
npm i html-withimg-loader -D
html中引入
<img src="./images/logo.png" alt="logo.png">
webpack.config.js中的配置
{
test:/\.(html|html)$/,
use:'html-withimg-loader',
include:path.join(__dirname,'./src'),
exclude:/node_modules/
}
13.熱替換（改哪個(gè)文件就自動(dòng)刷新哪個(gè)文件铝条，不用所有文件都重新打包靖苇，節(jié)約性能和時(shí)間）
devServer: {
contentBase: './build',
port: 3000,
compress: true,
open: true,
+ hot: true//開(kāi)啟熱替換
},
plugins:[
+ new webpack.HotModuleReplacementPlugin(),//配置熱替換的插件
]
入口文件js的配置
在入口js文件的最后席噩，添加以下代碼
if(module.hot){
module.hot.accept();
}
14.轉(zhuǎn)義ES6/ES7/JSX （Babel）
安裝
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
配置
{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
其中一般情況會(huì)把配置文件拿出來(lái)。像這樣：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
新建.babelre文件
{
"presets": ["es2015", "stage-2",["env", { "modules": false }]],
"plugins": ["transform-runtime"],
"comments": false
}
jsx語(yǔ)法處理（jsx-loader）
module.exports ={
entry: './entry.js',
output: { path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
}
};
新建.babelrc的文件
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
16.resolve解析
1.自動(dòng)添加擴(kuò)展名進(jìn)行匹配 (extension)
指定extension之后可以不用在require或是import的時(shí)候加文件擴(kuò)展名,會(huì)依次嘗試添加擴(kuò)展名進(jìn)行匹配
resolve: {
//自動(dòng)補(bǔ)全后綴顾复，注意第一個(gè)必須是空字符串,后綴一定以點(diǎn)開(kāi)頭
extensions: [" ",".js",".css",".json"],
},
2.配置別名(alias)
每當(dāng)引入jquery模塊的時(shí)候班挖，它會(huì)直接引入jqueryPath,而不需要從node_modules文件夾中按模塊的查找規(guī)則查找
resolve:{
alias:{
jquery:"./lib/jquery/jquery.js"
}
}
//在入口文件 中直接引入 jquery（require('jquery')）即可 不用再加那么多的路徑
17. 如何調(diào)試打包后的代碼
webapck通過(guò)配置可以自動(dòng)給我們source maps文件，map文件是一種對(duì)應(yīng)編譯文件和源文件的方法
- source-map 把映射文件生成到單獨(dú)的文件芯砸，最完整最慢
- cheap-module-source-map 在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)不帶列映射的Map
- eval-source-map 使用eval打包源文件模塊,在同一個(gè)文件中生成完整sourcemap
- cheap-module-eval-source-map sourcemap和打包后的JS同行顯示萧芙，沒(méi)有映射列
devtool:'eval-source-map'
18. 區(qū)分環(huán)境變量
許多 library 將通過(guò)與 process.env.NODE_ENV 環(huán)境變量關(guān)聯(lián)，以決定 library 中應(yīng)該引用哪些內(nèi)容假丧。例如双揪，當(dāng)不處于生產(chǎn)環(huán)境中時(shí)，某些 library 為了使調(diào)試變得容易包帚，可能會(huì)添加額外的日志記錄(log)和測(cè)試(test)渔期。其實(shí)，當(dāng)使用 process.env.NODE_ENV === 'production' 時(shí)渴邦，一些 library 可能針對(duì)具體用戶(hù)的環(huán)境進(jìn)行代碼優(yōu)化疯趟，從而刪除或添加一些重要代碼。我們可以使用 webpack 內(nèi)置的 DefinePlugin 為所有的依賴(lài)定義這個(gè)變量：
npm install cross-env -D
"scripts": {
+ "build": "cross-env NODE_ENV=production webpack --mode development",
"dev": "webpack-dev-server --open --mode development "
},
plugins: [
+ new webpack.DefinePlugin({
+ NODE_ENV:JSON.stringify(process.env.NODE_ENV)
+ }),
if (process.env.NODE_ENV == 'development') {
console.log('這是開(kāi)發(fā)環(huán)境');
} else {
console.log('這是生產(chǎn)環(huán)境');
}
vue項(xiàng)目的webpack處理
安裝vue-loader vue-template-compiler
-vue-loader 解析.vue文件的谋梭，vue會(huì)自動(dòng)的調(diào)用vue-template-compiler信峻，只需要配置vue-loader即可
-vue-template-compiler用來(lái)解析vue模板的
配置
module: {
rules: [
...
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
}
}
...
]
}
基于以上一個(gè)完整的webpack配置
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');//自動(dòng)生成html插件
let CleanWebpackPlugin = require('clean-webpack-plugin');//清除文件插件
let webpack = require('webpack');
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');//抽離css文件
module.exports = {
entry: './src/index.js',//入口文件
output: {
filename: '[name].[hash:8].js',//出口文件名字（帶有hash值的）
path: path.resolve('./build')//出口文件路徑
},
devServer: {
contentBase: './build',//資源查詢(xún)根目錄
host:'localhost',//webpack服務(wù)監(jiān)聽(tīng)主機(jī)
port: 3000,//webpack服務(wù)監(jiān)聽(tīng)端口
compress: true,// 服務(wù)器壓縮
open: true,//打包后自動(dòng)打開(kāi)瀏覽器
hot: true//開(kāi)啟模塊熱替換
},
plugins: [
new ExtractTextWebpackPlugin({
filename:'css/index.css'//抽離文件名
}),
new webpack.HotModuleReplacementPlugin(),//引入模塊熱替換插件
new CleanWebpackPlugin(['./build']),//每次打包前自動(dòng)清除build文件夾下的內(nèi)容
new HtmlWebpackPlugin({//自動(dòng)生成html文件配置
template: './src/index.html',//生成的html文件的模板
title: 'title',//生成的html文件的標(biāo)題
hash: true,//生成的html文件引入打包后的js是帶hash值的（避免緩存）
// minify:{
// removeAttributeQuotes:true,//生成的html文件去掉沒(méi)用的引號(hào)
// collapseWhitespace:true//生成的html文件去掉沒(méi)用的空格
// }
}),
new webpack.DefinePlugin({//區(qū)分環(huán)境變量
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
],
mode: 'development',//mode可以更改模式(此處代表開(kāi)發(fā)模式)
resolve: {
alias:{
jquery:"./lib/jquery/jquery.js"http://引入jquery直接使用jQuery即可，不用在寫(xiě)全路徑瓮床。
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',//處理es6
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,//編譯圖片
loader: 'file-loader',
options: {
limit: 1024,//小于1M編碼成base64方式引入圖片
outputPath:'images/'//指定打包后的圖片位置
}
},
{
test: /\.css$/, use: cssExtract.extract({//編譯css文件（并抽離出去）
use: [
{ loader: 'css-loader' },
{ loader:'postcss-loader']}//給css的樣式加前綴
]
})
},
{
test: /\.less$/, use: LessExtract.extract({//編譯less文件（并抽離出去）
use:[
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
},
]
},
}
.babelrc文件
{
"presets": ["react", "env"],
"plugins": []
}
postcss.config.js
module.exports={
plugins:[require('autoprefixer')]
}
入口文件盹舞。。隘庄。踢步。
import './index.css';//引入css
let userImg=require('./userImg.jpg')//引入圖片
if(module.hot){//熱替換代碼
module.hot.accept();
}
package.json文件
{
"name": "webpack-public",
"version": "1.0.0",
"description": "WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)丑掺，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss获印，TypeScript等），并將其打包為合適的格式以供瀏覽器使用街州。",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhufengzhufeng/webpack-public5.4.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/zhufengzhufeng/webpack-public5.4/issues"
},
"homepage": "https://github.com/zhufengzhufeng/webpack-public5.4#readme",
"devDependencies": {
"autoprefixer": "^8.4.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"glob": "^7.1.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.2",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"postcss-loader": "^2.1.5",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
}
}
index.html文件模板
//頁(yè)面只需要一個(gè)div即可
<div id='app'></div>
