安裝依賴
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"css-minimizer-webpack-plugin": "^1.1.5",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5"
}
基礎配置(webpack.base.config.js)
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 入口配置：string｜array｜object
// string的寫法：生成一個js檔案
// entry: './src/main.js',
// array的寫法：生成一個js檔案
// entry: ["./src/main.js", "./src/root.js"],
// entry: ["./src/root.js", "./src/main.js"],
// object的寫法:生成多個js檔案，有多少對key-value對，就有多少個js檔案
entry: {
home: './src/views/home/index.js',
product: './src/views/product/index.js',
about: './src/views/about/index.js',
},
output: {
filename: "js/[name].js",
path: path.join(__dirname, "../dist"),
publicPath: "/",
},
plugins: [
// new HtmlWebpackPlugin()建構的執行個體，會建立一個html頁面
new HtmlWebpackPlugin({
template: path.join(__dirname, "../public/index.html"),
filename: "home.html",
title: "首頁",
// 頁面需要那個子產品的js和css
chunks: ['home'],
// 除去哪些chunks都需要
// excludeChunks: ['home']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "../public/index.html"),
filename: "product.html",
title: "産品",
chunks: ['product'],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "../public/index.html"),
filename: "about.html",
title: "關于",
chunks: ['about'],
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
plugins: [],
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
],
},
resolve: {
// 可以省略的檔案字尾
extensions: [".js", ".json"],
// 路徑别名
alias: {
"@": path.join(__dirname, "../src"),
"@pages": path.join(__dirname, "../src/pages"),
"@components": path.join(__dirname, "../src/components"),
},
},
};
開發環境配置(webpack.dev.config.js)
const path = require("path");
const baseConfig = require("./webpack.base.config");
const {merge} = require('webpack-merge');
const {HotModuleReplacementPlugin} = require('webpack');
module.exports = merge(baseConfig, {
mode:"development",
plugins: [
new HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpg|jpeg|png|gif|svg|webp)$/,
loader: 'file-loader'
}
]
},
devServer: {
open: false,
contentBase: path.join(__dirname, "./dist"),
inline: true,
hot: true
},
});
生産環境配置(webpack.pro.config.js)
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽離css
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//壓縮css
const TerserWebpackPlugin = require('terser-webpack-plugin');//解析js
module.exports = merge(baseConfig, {
mode: "production",
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(jpg|jpeg|png|gif|svg|webp)$/,
loader: 'url-loader',
options: {
limit: 1024*1024*1
}
}
]
},
optimization: {
minimizer: [
new TerserWebpackPlugin(),
new CssMinimizerWebpackPlugin(),
]
}
});
Like
Like
Love
Haha
Wow
Sad
Angry