可能也是因為最近比較閑，所以才有功夫來看了下外國的webpack文檔以及社區(qū)雨席。
webpack官網(wǎng)
因為webpack4和之前的版本有所區(qū)別所以我這里只是介紹下webpack4.x版本了牍鞠。
- 首先逛裤，我們需要創(chuàng)建一個文件夾性锭，我這里命名是ceshi3入愧。
-
這個文件夾下绝葡，我創(chuàng)建一個src文件夾用來存放打包前的代碼深碱。創(chuàng)建一個dist來存放打包之后的代碼。創(chuàng)建一個config來存放webpack配置代碼藏畅。
創(chuàng)建文件夾 - 接下來我們通過npm 安裝 webpack敷硅、webpack-cli、webpack-dev-server這三個插件墓赴。
- 然后我們在config文件夾下創(chuàng)建一個文件名為webpack.dev.js來配置webpack竞膳。我們先在src下創(chuàng)建一個main.js。讓這個js文件作為入口文件诫硕。
- 我們隨便在main.js文件中寫一個函數(shù)坦辟。然后我們開始寫webpack.dev.js。首先我們引入node的path模塊章办，然后配置入口和mode以及出口锉走，這三個是必須的滨彻。代碼如下：
const path = require("path");
module.exports = {
entry: {
main: "./src/main.js"
},
mode: "development",//development（開發(fā)模式）和production（生產(chǎn)模式）
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname,"../dist"),
publicPath: "/"
}
};
然后我們后臺執(zhí)行
webpack --config=config/webpack.dev.js
接下來我們就會發(fā)現(xiàn)打包成功，在dist文件夾中出現(xiàn)一個main-bundle.js
打包成功
其實塊我一般是為了方便起見挪蹭，我會把后臺執(zhí)行的那行代碼寫到package.json文件中亭饵。
{
"dependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
},
"scripts": {
"build": "webpack --config=config/webpack.dev.js"
}
}
這樣我們就可以直接在控制臺輸入
cnpm run build
這樣就可以了。
