webpack基本用法
什么是webpack？webpack是靜態(tài)模塊打包器，當(dāng)webpack處理應(yīng)用程序時(shí)，會(huì)將所有這些模塊打包成一個(gè)或者多個(gè)文件。webpack可以處理js/css/圖片、圖標(biāo)字體等單位。用于處理開發(fā)過程中存在于本地的靜態(tài)資源。
初始化npm init -y，新建文件webpack.config.js
一、entry & output
entry：入口文件；output：出口文件
單入口與單出口的寫法
const path = require('path');
module.exports = {
// 單入口
entry: './src/index.js',
// 出口
output: {
// 單出口文件名稱
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
多入口與多出口寫法
const path = require('path');
module.exports = {
// 多入口
entry: {
index: './src/index.js',
search: './src/search.js'
},
// 出口
output: {
// 多出口名稱
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
};
二、loader
什么是loader？loader就是能夠讓webpack去處理那些非js文件，例如：圖片、css文件等。當(dāng)然loader也可以處理js文件。被用于轉(zhuǎn)換某些類型的模塊。
安裝loader依賴npm i --save-dev babel-loader @babel/core @babel/preset-env，在當(dāng)前文件夾中新建babel.config.json,配置：
{
"presets": ["@babel/preset-env"]
}
在webpack.config.js中配置：
const path = require('path');
module.exports = {
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
// 規(guī)則
rules: [
{
// 正則所有 JS 文件
test: /\.js$/,
// 排除 node_modules 文件
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
當(dāng)打包npm run webpack后，會(huì)通過webpack.config.js中設(shè)置的規(guī)則，入口文件夾 src 下面的 index.js 文件就會(huì)被 babel-loader 處理，處理完成后會(huì)得到出口 dist 文件夾下編譯后的 es6 以下的 index.js 文件
安裝依賴 core-js ，在入口文件 index.js 中引入import 'core-js/stable'用于處理兼容IE部分語法
三、plugins
plugins(插件)，可以用于執(zhí)行范圍更廣的任務(wù)，例如：打包優(yōu)化和壓縮，定義環(huán)境中的變量等。
安裝html-webpack-plugin插件處理html文件：npm install --save-dev html-webpack-plugin
單頁面插件配置：
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
// 插件
plugins: [
// 調(diào)用
new htmlWebpackPlugin({
template: './index.html'
})
]
};
多頁面插件配置：
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// 多入口
entry: {
index: './src/index.js',
search: './src/search.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
// 多頁面調(diào)用插件
plugins: [
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
// 指定引入文件
chunks: ['index'],
// html-webpack-plugin其他
minify:{
// 刪除注釋
removeComments:true,
// 刪除空格
collapseWhitespace:true,
// 刪除標(biāo)簽屬性值的雙引號(hào)
removeAttributeQuotes:true
}
}),
new htmlWebpackPlugin({
template: './search.html',
filename: 'search.html',
chunks: ['search']
})
]
};
四、簡(jiǎn)單使用
1、安裝css-loader和mini-css-extract-plugin插件處理css文件：npm install --save-dev css-loader mini-css-extract-plugin
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css文件
{
test: /\.css$/,
// 從右向左執(zhí)行
use: [miniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
// 處理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 處理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
2、使用file-loader依賴處理css中本地圖片，安裝 loader：npm install --save-dev file-loader
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css文件
{
test: /\.css$/,
// 從右向左執(zhí)行
use: [{
loader: miniCssExtractPlugin.loader,
// 路徑
options: {
publicPath: '../'
}
}, 'css-loader']
},
// file-loader 處理css中本地圖片
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
// [ext] 代表當(dāng)前圖片的后綴
name: 'images/[name].[ext]'
}
}
}
]
},
plugins: [
// 處理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 處理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
3、使用html-withimg-loader依賴處理HTML中本地圖片，安裝 loader：npm install --save-dev html-withimg-loader
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css文件
{
test: /\.css$/,
// 從右向左執(zhí)行
use: [{
loader: miniCssExtractPlugin.loader,
// 路徑
options: {
publicPath: '../'
}
}, 'css-loader']
},
// file-loader 處理css中本地圖片
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
// [ext] 代表當(dāng)前圖片的后綴
name: 'images/[name].[ext]',
// 取消es6模塊導(dǎo)出
esModule: false
}
}
},
// html-withimg-loader 處理HTML中的本地圖片
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
}
]
},
plugins: [
// 處理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 處理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
4、使用url-loader依賴處理圖片文件，安裝 loader：npm install --save-dev url-loader，注意：使用url-loader時(shí)也要安裝file-loader
// url-loader 處理本地圖片
module: {
rules: [
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
// [ext] 代表當(dāng)前圖片的后綴
name: 'images/[name].[ext]',
// 取消es6模塊導(dǎo)出
esModule: false,
// 小于10KB的圖片以Base64方式展示
limit: 10000
}
}
}
]
}
5、使用webpack-dev-server搭建開發(fā)環(huán)境，安裝：npm install --save-dev webpack-dev-server
package.json中添加："dev":"webpack-dev-server --open"
"scripts": {
"webpack": "webpack --config webpack.config.js",
"dev":"webpack-dev-server --open"
},
使用npm run dev運(yùn)行開發(fā)環(huán)境
