参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置
1.初始化
yarn init
初始化成功
yarn init v1.17.3
question name (my-webpack-config):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url (https://github.com/1071942338/my-webpack-config.git):
question author (张文旗 <1071942338@qq.com>):
question license (MIT):
question private:
success Saved package.json
✨ Done in 10.97s.
2.安装 webpack webpack-cli
yarn add webpack webpack-cli -D
3. package.json 添加 build 脚本
3.1 添加 index.js 文件
新建 src 文件夹新建 index.js 文件
console.log("Hello Webpack !");
3.2 添加 webpack.config.js 文件
新建 config 文件夹新建 webpack.config.js 文件
module.exports = {
//指定入口文件
entry: "./src/index.js",
output: {
//输出文件名称
filename: "main.js",
},
//暂时指定开发模式
mode: "development",
};
3.3 package.json 添加 scripts:build
"scripts": {
"build": "webpack --config ./config/webpack.config.js"
},
3.4 执行构建脚本
yarn build
yarn run v1.17.3
$ webpack --config ./config/webpack.config.js
Hash: 33226b34c0395d779dc7
Version: webpack 4.44.1
Time: 47ms
Built at: 2020/08/10 下午2:31:51
Asset Size Chunks Chunk Names
main.js 3.8 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 32 bytes {main} [built]
✨ Done in 0.60s.
3.5 执行结果
生成 dist 文件夹dist 目录下生成 main.js 文件dist 目录添加 index.html 文件并使用 main.js ，可在控制台看到打印内容：Hello Webpack !
4. 拆分 webpack.config.js
4.1 拆分目的
开发和生产环境需求不同，例如开发需要热更新及时查看代码效果，生成需要压缩代码便于维护
4.2 拆分结果
webpack.base.js 公共配置webpack.dev.js 开发开发配置webpack.prod.js 生成环境配置
4.3 拆分工具
需要用到webpack-merge
yarn add webpack-merge -D
4.3 然后修改文件内容
<!-- webpack.base.js -->
module.exports = {
//指定入口文件
entry: "./src/index.js",
output: {
//输出文件名称
filename: "main.js",
},
};
<!-- webpack.dev.js -->
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base");
module.exports = merge(baseConfig, {
mode: "development",
});
<!-- webpack.prod.js -->
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base");
module.exports = merge(baseConfig, {
mode: "production",
});
4.3 修改 package.json 文件内容
"scripts": {
"dev": "webpack --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},
4.4 分别执行指令
yarn dev
<!-- 或 -->
yarn build
都可以生成dist/main.js文件，区别就是dev为 develpotment 模式代码未压缩。
5. 使用 html 模板
yarn add html-webpack-plugin -D
5.1 添加 index.html 文件
新建 public 文件夹新建 index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>my-webpack-config</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
5.2 修改 webpack.base.js 文件
const pathsUtil = require("./pathsUtil");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//指定入口文件
entry: pathsUtil.appIndexJs,
output: {
//输出文件名称
filename: "main.js",
},
plugins: [
new HtmlWebpackPlugin({
template: pathsUtil.appHtml,
inject: true,
}),
],
};
5.3 然后执行构建命令即可看到自动生成的index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>my-webpack-config</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body><script src="main.js"></script></body>
</html>
6.添加 CSS 支持
yarn add style-loader css-loader -D
6.1 添加index.css文件
.color {
color: rebeccapurple;
}
6.2 修改index.js文件
import "./index.css";
const colorElement = document.createElement("div");
colorElement.setAttribute("class", "color");
colorElement.innerText = "my-webpack-config";
document.body.appendChild(colorElement);
6.3 修改 webpack.base.js 文件
const pathsUtil = require("./pathsUtil");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//指定入口文件
entry: pathsUtil.appIndexJs,
output: {
//输出文件名称
filename: "main.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: pathsUtil.appHtml,
inject: true,
}),
],
};
7.添加图片支持
yarn add url-loader file-loader -D
7.1 添加尺寸不同的图片
small 47Kbig 4.4M
7.2 修改 webpack.base.js 文件
const pathsUtil = require("./pathsUtil");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//指定入口文件
entry: pathsUtil.appIndexJs,
output: {
//输出文件名称
filename: "main.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [
{
loader: "url-loader",
options: {
limit: 51200,//50k
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: pathsUtil.appHtml,
inject: true,
}),
],
};
7.3 修改 index.js 文件
import "./index.css";
import smallImage from "./image/small.png";
import bigImage from "./image/big.png";
const colorElement = document.createElement("div");
colorElement.setAttribute("class", "color");
colorElement.innerText = "my-webpack-config";
document.body.appendChild(colorElement);
const smallImageElement = document.createElement("img");
smallImageElement.setAttribute("src", smallImage);
document.body.appendChild(smallImageElement);
const bigImageElement = document.createElement("img");
bigImageElement.setAttribute("src", bigImage);
document.body.appendChild(bigImageElement);
7.4 执行构建打包后在浏览器中查看
small 以 base64字符串显示big 4.4M 以路径加载图片显示
8.添加字体解析
yarn add file-loader -D
8.1 修改 index.css
.color {
color: rebeccapurple;
}
@font-face {
font-family: myFirstFont;
src: url("./font/font.ttf");
}
.font {
font-family: myFirstFont;
}
8.2 修改 index.js
import "./index.css";
import smallImage from "./image/small.png";
import bigImage from "./image/big.png";
const colorElement = document.createElement("div");
colorElement.setAttribute("class", "color");
colorElement.innerText = "my-webpack-config";
document.body.appendChild(colorElement);
const fontElement = document.createElement("div");
fontElement.setAttribute("class", "color font");
fontElement.innerText = "my-webpack-config";
document.body.appendChild(fontElement);
const smallImageElement = document.createElement("img");
smallImageElement.setAttribute("src", smallImage);
document.body.appendChild(smallImageElement);
const bigImageElement = document.createElement("img");
bigImageElement.setAttribute("src", bigImage);
document.body.appendChild(bigImageElement);
8.3 修改 webpack.base.js
const pathsUtil = require("./pathsUtil");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//指定入口文件
entry: pathsUtil.appIndexJs,
output: {
//输出文件名称
filename: "main.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [
{
loader: "url-loader",
options: {
limit: 51200, //50k
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: pathsUtil.appHtml,
inject: true,
}),
],
};
8.4 构建打包 查看效果
9. 添加 React 支持
9.1 添加 babel 支持
yarn add @babel/core @babel/preset-env @babel/preset-react -D
9.2 添加 babel-loader 支持
yarn add babel-loader -D
9.3 添加 React 支持
yarn add react react-dom
9.4 修改 webpack.base.js
yarn add react react-dom
9.5 修改 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>my-webpack-config</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="root"></div>
</body>
</html>
9.6 修改 index.js
import React from "react";
import ReactDom from "react-dom";
import "./index.css";
import App from "./App.jsx";
ReactDom.render(<App />, document.getElementById("root"));
9.7 新增 App.jsx
import React from "react";
import smallImage from "./image/small.png";
import bigImage from "./image/big.png";
export default class App extends React.Component {
render() {
return (
<div>
<div className="color">my-webpack-config</div>
<div className="color font">my-webpack-config</div>
<img src={smallImage} alt=""></img>
<img src={bigImage} alt=""></img>
</div>
);
}
}
9.9 执行构建脚本，查看效果
10. 自动编译代码
yarn add webpack-dev-server -D
10.1 添加 scripts 文件夹
新增 dev.js新增 build.js
10.2 编辑 dev.js
"use strict";
const webpack = require("webpack");
const prodConfig = require("../config/webpack.dev.js");
const webpackDevServer = require("webpack-dev-server");
const compiler = webpack(prodConfig);
const devServerOptions = Object.assign({}, prodConfig.devServer, {
open: true,
stats: {
colors: true,
},
});
const server = new webpackDevServer(compiler, devServerOptions);
server.listen(3000, "127.0.0.1", () => {
console.log("Starting server on http://localhost:3000");
});
10.3 编辑 build.js
"use strict";
const webpack = require("webpack");
const prodConfig = require("../config/webpack.prod.js");
webpack(prodConfig, (err, stats) => {
if (err || stats.hasErrors()) {
// 在这里处理错误
console.log("err:", err);
console.log("stats:", stats);
}
// 处理完成
console.log("处理完成");
});
10.4 编辑 package.json 文件
"scripts": {
"dev": "node ./scripts/dev.js",
"build": "node ./scripts/build.js"
},
10.5 执行构建脚本，查看效果
yarn dev
然后自动打开 http://localhost:3000 页面，编辑页面保存后，页面自动刷新
代码仓库
my-webpack-config
参考链接
安装起步管理资源开发开发中 Server(devServer)webpack webpack-dev-serverurl-loaderfile-loadercss-loaderstyle-loadercss-loaderbabel-loaderBabel Usage Guidebabel-preset-reacthtml-webpack-plugin
