webpack模組打包簡易版
阿新 • • 發佈：2020-06-30
webpack基本使用流程(react)
1.安裝webpack腳手架
cnpm install webpack webpack-cli -D
2.安裝處理css的loader
cnpm install style-loader css-loader node-sass sass-loader postcss-loader -D
3.安裝處理js的loader
cnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D
tip:react 新增[email protected]/preset-react
4.安裝處理圖片的loader
cnpm install file-loader url-loader -D
5.安裝html-webpack-plugin clean-webpack-plugin
cnpm install html-webpack-plugin clean-webpack-plugin -D
6.自動新增瀏覽器字首
cnpm install autoprefixer -D
7.安裝開發環境中所需要的服務
cnpm install webpack-dev-server -D //開發環境不需要打包,故使用webpack-dev-server啟動服務,記得在json檔案做配置
8.安裝生產環境抽離css的外掛
cnpm install [email protected] -D //不抽離css會導致css混入js中,導致程式碼的紊亂以及體積
tip:@next安裝最新版本
啟動檔案
webpack打包的時候預設會找到目錄下webpack.config.js檔案,
合併檔案
安裝webpack配置項
cnpm install webpack-merge -D //開發或者生產模式的時候將使用它作為合併
.babelrc檔案用於bebel處理之後的瀏覽器相容的版本,一般配置相容到瀏覽器最後2個版本
{
"presets": [
[
{
"targets":{
"browsers":["last 2 versions"]
//相容到瀏覽器最後2個版本
}
}
]
]
}
postcss.config.js
autoprefixer為不同的瀏覽器自動新增css樣式字首
舉例:由於專案配置了scss,我們用這個示範,可以看的瀏覽器的測試結果已經新增好了字首
module.exports = {
plugins:[
require("autoprefixer")({
overrideBrowserslist:[
"defaults",
"Android 4.1",
"iOS 7.1",
"Chrome>31",
"ff>31",
"ie>=8",
"last 2 versions",
">0%"
]
})
]
}
config檔案用於webpack的配置項,一般為三個檔案,base模式,開發模式,生產模式
此處展示為base檔案,base為開發生產都需要用到的檔案
const path = require('path')
//生成建立html入口檔案，比如單頁面可以生成一個html檔案入口，配置N個html-webpack-plugin可以生成N個頁面入口
const HtmlWebapackPlugin = require('html-webpack-plugin')
//對於每一次生成的dist做更新
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//引入的外掛請務必在plugin中做例項化
//入口檔案出口檔案
const PATH = {
app:path.join(__dirname,"../src/main.js"),
build:path.join(__dirname,"../dist")
}
module.exports = {
entry:{
app:PATH.app
},
output:{
filename:process.env.NODE_ENV == "development"?"[name].[hash:8].js":"js/[name].js",
path:PATH.build
},
//使用外掛
plugins:[
new HtmlWebapackPlugin({
filename:"index.html",
template:"./public/index.html"
}),
new CleanWebpackPlugin()
],
//別名配置
resolve:{
extensions:[".jsx",".js",".json"],
alias:{
}
},
//處理模組
module:{
rules:[
//js檔案處理
{
test:/\.(js|jsx)$/,
loader:"babel-loader",
exclude:path.join(__dirname,"../node_modules")
},
//圖片處理
{
test:/\.(png|jpg|gif|svg)$/,
use:{
loader:"url-loader",
options:{
limit:2048,
name:"image/[name].[ext]"
}
}
},
//字型處理
{
test:/\.(woff|svg|woff2|eot|ttf)$/,
use:{
loader:"url-loader",
options:{
name:"iconfont/[name].[ext]"
},
},
exclude:path.join(__dirname,"../node_modules")
}
]
}
}
執行npm run build 成功打包之後
