Skip to content

Commit b048866

Browse files
Z6TZ6T
committed
add dev.config.js
1 parent 8c179f3 commit b048866

22 files changed

+35148
-1460
lines changed

‎build/webpack.base.config.1.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
4+
const HtmlWebpackPlugin = require("html-webpack-plugin");
5+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
6+
7+
module.exports = {
8+
mode: "development",
9+
devtool: "inline-source-map",
10+
entry: ["react-hot-loader/patch", "./src/index.js"],
11+
output: {
12+
// 输出目录
13+
path: path.join(__dirname, "dist"),
14+
// 文件名称
15+
filename: "bundle.[hash:8].js"
16+
},
17+
resolve: {
18+
extensions: [ ".js", ".jsx"],
19+
alias: {
20+
"@": path.join(__dirname, "src"),
21+
pages: path.join(__dirname, "src/pages"),
22+
router: path.join(__dirname, "src/router")
23+
}
24+
},
25+
optimization: {
26+
usedExports:true,
27+
splitChunks: {
28+
chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
29+
},
30+
},
31+
module: {
32+
rules: [
33+
{
34+
// cnpm i babel-loader @babel/core @babel/preset-env -D
35+
test: /\.jsx?$/,
36+
exclude: /node_modules/,
37+
use: [
38+
{
39+
loader: "babel-loader",
40+
options: {
41+
// 指定babel预处理转义
42+
presets: ["@babel/preset-env", "@babel/preset-react"]
43+
}
44+
}
45+
]
46+
},
47+
{
48+
test: /\.scss$/,
49+
use: [
50+
MiniCssExtractPlugin.loader,
51+
"css-loader", // 编译css
52+
"postcss-loader",
53+
"sass-loader" // 编译scss
54+
]
55+
},
56+
{
57+
test: /\.(png|jpg|jpeg|gif|svg)/,
58+
use: {
59+
loader: "url-loader",
60+
options: {
61+
outputPath: "images/", // 图片输出的路径
62+
limit: 10 * 1024
63+
}
64+
}
65+
}
66+
]
67+
},
68+
plugins: [
69+
//开启HMR(热替换功能,替换更新部分,不重载页面！) 相当于在命令行加 --hot
70+
new webpack.HotModuleReplacementPlugin(),
71+
new CleanWebpackPlugin(),
72+
new HtmlWebpackPlugin({
73+
filename: "index.html", // 最终创建的文件名
74+
template: path.join(__dirname, "src/template.html") // 指定模板路径
75+
}),
76+
new MiniCssExtractPlugin({
77+
filename: "[name].css",
78+
chunkFilename: "[id].css"
79+
})
80+
],
81+
devServer: {
82+
hot: true,
83+
contentBase: path.join(__dirname, "./dist"),
84+
host: "0.0.0.0", // 可以使用手机访问
85+
port: 8080,
86+
historyApiFallback: true, // 该选项的作用所有的404都连接到index.html
87+
proxy: {
88+
// 代理到后端的服务地址
89+
"/api": "http://localhost:3000"
90+
}
91+
}
92+
};

‎build/webpack.base.config.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
4+
const HtmlWebpackPlugin = require("html-webpack-plugin");
5+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
6+
7+
module.exports = {
8+
entry: ["react-hot-loader/patch", "../src/index.js"],
9+
output: {
10+
// 输出目录
11+
path: path.join(__dirname, "dist")
12+
},
13+
resolve: {
14+
extensions: [ ".js", ".jsx"],
15+
alias: {
16+
"@": path.join(__dirname, "src"),
17+
pages: path.join(__dirname, "src/pages"),
18+
router: path.join(__dirname, "src/router")
19+
}
20+
},
21+
optimization: {
22+
usedExports:true,
23+
splitChunks: {
24+
chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
25+
},
26+
},
27+
module: {
28+
rules: [
29+
{
30+
// cnpm i babel-loader @babel/core @babel/preset-env -D
31+
test: /\.jsx?$/,
32+
exclude: /node_modules/,
33+
use: [
34+
{
35+
loader: "babel-loader",
36+
options: {
37+
// 指定babel预处理转义
38+
presets: ["@babel/preset-env", "@babel/preset-react"]
39+
}
40+
}
41+
]
42+
},
43+
{
44+
test: /\.scss$/,
45+
use: [
46+
MiniCssExtractPlugin.loader,
47+
"css-loader", // 编译css
48+
"postcss-loader",
49+
"sass-loader" // 编译scss
50+
]
51+
},
52+
{
53+
test: /\.(png|jpg|jpeg|gif|svg)/,
54+
use: {
55+
loader: "url-loader",
56+
options: {
57+
outputPath: "images/", // 图片输出的路径
58+
limit: 10 * 1024
59+
}
60+
}
61+
},
62+
{
63+
test: /\.(eot|woff2?|ttf|svg)$/,
64+
use: [
65+
{
66+
loader: 'url-loader',
67+
options: {
68+
name: '[name]-[hash:5].min.[ext]',
69+
limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
70+
publicPath: 'fonts/',
71+
outputPath: 'fonts/'
72+
}
73+
}
74+
]
75+
}
76+
]
77+
},
78+
plugins: [
79+
new CleanWebpackPlugin(),
80+
new HtmlWebpackPlugin({
81+
filename: "index.html", // 最终创建的文件名
82+
template: path.join(__dirname, "../src/template.html") // 指定模板路径
83+
}),
84+
new MiniCssExtractPlugin({
85+
filename: "[name].css",
86+
chunkFilename: "[id].css"
87+
})
88+
],
89+
performance: false,
90+
devServer: {
91+
hot: true,
92+
contentBase: path.join(__dirname, "../dist"),
93+
host: "0.0.0.0", // 可以使用手机访问
94+
port: 8080,
95+
historyApiFallback: true, // 该选项的作用所有的404都连接到index.html
96+
proxy: {
97+
// 代理到后端的服务地址
98+
"/api": "http://localhost:3000"
99+
}
100+
}
101+
};

‎build/webpack.dev.config.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
4+
const HtmlWebpackPlugin = require("html-webpack-plugin");
5+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
6+
7+
module.exports = {
8+
mode: "development",
9+
devtool: "inline-source-map",
10+
entry: ["react-hot-loader/patch", "./src/index.js"],
11+
output: {
12+
// 输出目录
13+
path: path.join(__dirname, "dist"),
14+
// 文件名称
15+
filename: "bundle.[hash:8].js"
16+
},
17+
resolve: {
18+
extensions: [ ".js", ".jsx"],
19+
alias: {
20+
"@": path.join(__dirname, "src"),
21+
pages: path.join(__dirname, "src/pages"),
22+
router: path.join(__dirname, "src/router")
23+
}
24+
},
25+
optimization: {
26+
usedExports:true,
27+
splitChunks: {
28+
chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
29+
},
30+
},
31+
module: {
32+
rules: [
33+
{
34+
test: /\.scss$/,
35+
use: [
36+
MiniCssExtractPlugin.loader,
37+
"css-loader", // 编译css
38+
"postcss-loader",
39+
"sass-loader" // 编译scss
40+
]
41+
},
42+
{
43+
test: /\.(png|jpg|jpeg|gif|svg)/,
44+
use: {
45+
loader: "url-loader",
46+
options: {
47+
outputPath: "images/", // 图片输出的路径
48+
limit: 10 * 1024
49+
}
50+
}
51+
}
52+
]
53+
},
54+
plugins: [
55+
//开启HMR(热替换功能,替换更新部分,不重载页面！) 相当于在命令行加 --hot
56+
new webpack.HotModuleReplacementPlugin(),
57+
new MiniCssExtractPlugin({
58+
filename: "[name].css",
59+
chunkFilename: "[id].css"
60+
})
61+
],
62+
devtool: 'cheap-module-eval-soure-map',
63+
devServer: {
64+
hot: true,
65+
contentBase: path.join(__dirname, "./dist"),
66+
host: "0.0.0.0", // 可以使用手机访问
67+
port: 8080,
68+
historyApiFallback: true, // 该选项的作用所有的404都连接到index.html
69+
proxy: {
70+
// 代理到后端的服务地址
71+
"/api": "http://localhost:3000"
72+
}
73+
}
74+
};

0 commit comments

Comments
 (0)