什么是webpack
WebPack可以看做是模塊打包機(jī)：它做的事情是槐秧，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss砸彬，TypeScript等）橙喘，并將其打包為合適的格式以供瀏覽器使用挑庶。webpack核心概念
Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始什往，可抽象成輸入扳缕。
Module：模塊，在 Webpack 里一切皆模塊别威，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件躯舔。Webpack 會(huì)從配置的 Entry 開始遞歸找出所有依賴的模塊。
Chunk：代碼塊省古，一個(gè) Chunk 由多個(gè)模塊組合而成粥庄，用于代碼合并與分割。 Loader：模塊轉(zhuǎn)換器豺妓，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容惜互。
Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來(lái)改變構(gòu)建結(jié)果或做你想要的事情琳拭。
Output：輸出結(jié)果训堆，在 Webpack 經(jīng)過(guò)一系列處理并得出最終想要的代碼后輸出結(jié)果。webpack執(zhí)行流程
webpack啟動(dòng)后會(huì)在entry里配置的module開始遞歸解析entry所依賴的所有module白嘁，沒找到一個(gè)module, 就會(huì)根據(jù)配置的loader去找相應(yīng)的轉(zhuǎn)換規(guī)則坑鱼，對(duì)module進(jìn)行轉(zhuǎn)換后在解析當(dāng)前module所依賴的module，這些模塊會(huì)以entry為分組絮缅，一個(gè)entry和所有相依賴的module也就是一個(gè)chunk鲁沥，最后webpack會(huì)把所有chunk轉(zhuǎn)換成文件輸出，在整個(gè)流程中webpack會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行plugin的邏輯開始從零配置webpack
初始化配置
mkdir webpack-start
cd webpack-start
npm init
配置webpack
yarn add webpack webpack-cli -D //webpack4把webpack拆分了
mkdir src cd src并且創(chuàng)建index.html, index.js
mkdir dist
touch webpack.config.js
webpack.config.js
module.exports = {
entry: './src/index.js', //入口文件耕魄，src下的index.js
output: {
path: path.join(__dirname, 'dist'), // 出口目錄画恰，dist文件
filename: '[name].[hash].js' //這里name就是打包出來(lái)的文件名，因?yàn)槭菃稳肟谖褪莔ain允扇，多入口下回分解
},
module: {},
plugin: {},
devServer: {}
}
配置開發(fā)服務(wù)器
yarn add webpack-dev-server -D
修改webpack.config.js
devServer: {
contentBase: path.join(__dirname, "dist"), //靜態(tài)文件根目錄
port: 9090, // 端口
host: 'localhost',
overlay: true,
compress: true // 服務(wù)器返回瀏覽器的時(shí)候是否啟動(dòng)gzip壓縮
}
修改package.json
"script": {
"build": "webpack --mode development", //這里為了不壓縮代碼马靠，用開發(fā)環(huán)境
"dev": "webpack-dev-server --open --mode development"
}
支持css文件
yarn add style-loader css-loader -D
// css-loader用來(lái)處理css中url的路徑
// style-loader可以把css文件變成style標(biāo)簽插入head中
// 多個(gè)loader是有順序要求的，從右往左寫蔼两，因?yàn)檗D(zhuǎn)換的時(shí)候是從右往左轉(zhuǎn)換的
module: {
rules: {
test: /.css$/,
use: ['style-laoder', 'css-loader'],
include: path.join(__dirname, 'src'), //限制范圍，提高打包速度
exclude: /node_modules/
}
}
支持es6逞度，react.js等
yarn add babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-preset -react -D
{
test: /.js$/,
use: {
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react'] // env轉(zhuǎn)換es6 stage-0轉(zhuǎn)es7 react轉(zhuǎn)react
}
}
}
同時(shí)可以把babel配置寫到.babelrc中
從js中分離css
yarn add extract-text-webpack-plugin -D
{
test: /.css$/, // 轉(zhuǎn)換文件的匹配正則
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
//如果需要额划，可以在 sass-loader 之前將 resolve-url-loader 鏈接進(jìn)來(lái)
use: ['css-loader']
})
},
//加上plugin
plugins: [
new ExtractTextWebpackPlugin({
filename: 'css/[name].[hash].css' //放到dist/css/下
})
]
支持圖片
yarn add file-loader url-loader -D
file-loader 解決css等文件中引入圖片路徑的問題
url-loader 當(dāng)圖片較小的時(shí)候會(huì)把圖片BASE64編碼，大于limit參數(shù)的時(shí)候還是使用file-loader 進(jìn)行拷貝
{
// file-loader是解析圖片地址档泽，把圖片從源文件拷貝到目標(biāo)文件并且修改源文件名字
// 可以處理任意二進(jìn)制俊戳，bootstrap里的字體
// url-loader可以在文件比較小的時(shí)候，直接變成base64字符串內(nèi)嵌到頁(yè)面中
{
test: /.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/', // 圖片輸出的路徑
limit: 5 * 1024
}
}
},
// 同時(shí)要處理打包圖片路徑問題馆匿，
output: {
publicPath: '/'
}
處理css3屬性前綴
yarn add postcss-loader -D
{
test: /.css$/, // 轉(zhuǎn)換文件的匹配正則
// css-loader用來(lái)處理css中url的路徑
// style-loader可以把css文件變成style標(biāo)簽插入head中
// 多個(gè)loader是有順序要求的抑胎，從右往左寫，因?yàn)檗D(zhuǎn)換的時(shí)候是從右往左轉(zhuǎn)換的
// 此插件先用css-loader處理一下css文件
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
//如果需要渐北，可以在 sass-loader 之前將 resolve-url-loader 鏈接進(jìn)來(lái)
use: ['css-loader', 'postcss-loader']
})
},
建立.postcssrc.js文件
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {
"browsers": [
"ie >= 9",
"ff >= 30",
"chrome >= 34",
"safari >= 7",
"opera >= 23"
]
}
}
}
調(diào)試打包的代碼 webapck通過(guò)配置可以自動(dòng)給我們source maps文件阿逃，map文件是一種對(duì)應(yīng)編譯文件和源文件的方法
devtool: 'eval-source-map'
- 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同行顯示赃蛛，沒有映射列
壓縮js
webpack --mode production 會(huì)壓縮恃锉，可以忽略下面
yarn add uglifyjs-webpack-plugin -D
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
new UglifyjsWebpackPlugin(),
壓縮css
webpack --mode production 會(huì)壓縮，可以忽略下面
{
test: /.css$/, // 轉(zhuǎn)換文件的匹配正則
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-laoder',
options: {minimize: true}
},
'postcss-loader'
]
})
},
清空打包輸出目錄
yarn add clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
區(qū)分環(huán)境變量 許多 library 將通過(guò)與 process.env.NODE_ENV 環(huán)境變量關(guān)聯(lián)呕臂，以決定 library 中應(yīng)該引用哪些內(nèi)容破托。我們可以使用 webpack 內(nèi)置的 DefinePlugin 為所有的依賴定義這個(gè)變量：
"scripts": {
"build": "cross-env NODE_ENV=production webpack --mode development", // 設(shè)置NODE_ENV為production
"dev": "webpack-dev-server --open --mode development "
},
new webpack.DefinePlugin({
NODE_ENV:JSON.stringify(process.env.NODE_ENV)
})
在全局都有NODE_ENV這個(gè)變量,當(dāng)yarn run build,時(shí)，NODE_ENV = 'production'
暴露全局變量
new Webpack.ProvidePlugin({
'$': 'jquery'
}),
resolve解析
xtension: 指定extension之后可以不用在require或是import的時(shí)候加文件擴(kuò)展名,會(huì)依次嘗試添加擴(kuò)展名進(jìn)行匹配
resolve: {
//自動(dòng)補(bǔ)全后綴歧蒋，注意第一個(gè)必須是空字符串,后綴一定以點(diǎn)開頭
extension: ['', '.js', '.json', '.css']
}
alias: 配置別名可以加快webpack查找模塊的速度
resolve: {
alias: {
'bootstrap': 'bootstrap/dist/css/bootstrap.css'
}
}
復(fù)制靜態(tài)資源
yarn add copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'static'),
to: path.resolve(__dirname, 'pages/static'),
ignore: ['.*']
}
])
