1. 我們先新建一個(gè)項(xiàng)目 project 并用 npm 命令初始化項(xiàng)目（一路回車）
npm init
2. 安裝 webpack 與 webpack-cli ( 4 版本需要cli才能執(zhí)行命令)
npm install --save-dev webpack webpack-cli
3. 新建 src 文件夾把敞，存放我們要打包的源碼锹锰，默認(rèn)輸入文件是 index.js,所以我們?cè)?src 下新建一個(gè)index.js文件
4. 新建 webpack.config.js嚷往，webpack配置都是在這個(gè)文件下
5. 在package.json中配置服務(wù)和打包命令
這里配置了簡單的webpack，注釋詳細(xì)適合入門取刃，話不多說貼上代碼：
webpack.config.js
/** webpack.config.js*/
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 自動(dòng)生成index.html
const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 每次打包清空文件夾
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // css分離
const TerserWebpackPlugin = require("terser-webpack-plugin") // 壓縮js(在optimization中配置)
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 壓縮css
module.exports = {
context: process.cwd(),
mode: "production", // 開發(fā)環(huán)境和生產(chǎn)環(huán)境配置有很多不同，webpack4以后可以配置mode development/production 用于提供模式配置選項(xiàng)告訴webpack相應(yīng)地使用其內(nèi)置的優(yōu)化
devtool: "eval", // eval會(huì)有sourcemap
// entry: "./src/index.js", // 入口文件 如果是一個(gè)文件就是單入口 多入口要變成對(duì)象 輸出文件filename不能寫單個(gè)
entry: {
index: "./src/index.js",
login: "./src/login.js"
},
output: { // 輸出文件
path: path.resolve(__dirname, "dist"), // 輸出目錄只能是絕對(duì)目錄
filename: "[name].[hash].js", // 輸出文件名(bundle.js,如果是單入口蚁廓，輸出的文件名就是main) 防止緩存有三種hash: hash chunkHash contentHash [hash:8](只要八位)
publicPath: "/" // 根路徑,指定的是構(gòu)建后在html里的路徑(即在瀏覽器中的訪問路徑)
},
devServer: { // 安裝webpack-dev-server –D (其實(shí)是express開發(fā)服務(wù)器) package.json可以配置--open 運(yùn)行時(shí)自動(dòng)打開頁面
contentBase: path.resolve(__dirname, "dist"), // 配置開發(fā)服務(wù)器運(yùn)行時(shí)的根路徑(產(chǎn)出文件的根目錄)
port: 8082, // 監(jiān)聽的端口
host: "localhost", // 開發(fā)服務(wù)器監(jiān)聽的主機(jī)地址
compress: true // 開發(fā)服務(wù)器是否啟動(dòng)gzip等壓縮
},
module: {
rules: [
{
test: /\.css/,
// use: ["style-loader", "css-loader"] // loader三種寫法: use/loader/use+loader; 從右到左處理css文件
use: [{loader: MiniCssExtractPlugin.loader}, "css-loader"] // css分離
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
// use: ["file-loader"] // url-loader比file-loader 功能強(qiáng)(url-loader內(nèi)置了file-loader)
use: {
loader: "url-loader",
options: {
limit: 10 * 1024, // 如果圖片大小小于10k雷激，就轉(zhuǎn)為base64編碼
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 產(chǎn)出html文件,編譯時(shí)候會(huì)讀取模板文件
template: "./src/index.html", // 指定模板文件
filename: "index.html", // 產(chǎn)出后的文件名
hash: true, // 為了避免緩存替蔬，可以在產(chǎn)出的資源后面添加hash值
chunks: ["login", "index"], // 對(duì)應(yīng)入口文件 如果配置了chunksSorteMode,就可以根據(jù)代碼邏輯進(jìn)行排序，引入的先后順序
chunksSortMode:'manual' // 對(duì)引入代碼塊進(jìn)行排序的模式chunksSortMode: 默認(rèn)auto manual手動(dòng) dependency依賴項(xiàng) Funtion
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css", // 代碼塊名字
chunkFilename: "[id].css" // 異步加載用
})
],
optimization: { // 放優(yōu)化的內(nèi)容(這里的壓縮mode必須是production才會(huì)生效)
minimizer: [ // 放優(yōu)化的插件
new TerserWebpackPlugin({ // 壓縮js
parallel: true, // 開啟多進(jìn)程壓縮
cache: true // 開啟緩存(壓縮過的不壓縮)
}),
new OptimizeCssAssetsWebpackPlugin({ // 壓縮css
assetNameRegExp: /\.css$/g,
// cssProcessor: require("cssnao")
})
]
},
}
package.json
{
"name": "1.webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^2.0.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}
}
