自定义 webpack 配置1：基础配置

参考 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 (张文旗 <[email protected]>): 
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 47K
big 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

参考链接

自定义 webpack 配置1：基础配置

1.初始化

2.安装 webpack webpack-cli

3. package.json 添加 build 脚本

3.1 添加 index.js 文件

3.2 添加 webpack.config.js 文件

3.3 package.json 添加 scripts:build

3.4 执行构建脚本

3.5 执行结果

4. 拆分 webpack.config.js

4.1 拆分目的

4.2 拆分结果

4.3 拆分工具

4.3 然后修改文件内容

4.3 修改 package.json 文件内容

4.4 分别执行指令

5. 使用 html 模板

5.1 添加 index.html 文件

5.2 修改 webpack.base.js 文件

5.3 然后执行构建命令即可看到自动生成的index.html文件

6.添加 CSS 支持

6.1 添加index.css文件

6.2 修改index.js文件

6.3 修改 webpack.base.js 文件

7.添加图片支持

7.1 添加尺寸不同的图片

7.2 修改 webpack.base.js 文件

7.3 修改 index.js 文件

7.4 执行构建打包后在浏览器中查看

8.添加字体解析

8.1 修改 index.css

8.2 修改 index.js

8.3 修改 webpack.base.js

8.4 构建打包 查看效果

9. 添加 React 支持

9.1 添加 babel 支持

9.2 添加 babel-loader 支持

9.3 添加 React 支持

9.4 修改 webpack.base.js

9.5 修改 index.html

9.6 修改 index.js

9.7 新增 App.jsx

9.9 执行构建脚本，查看效果

10. 自动编译代码

10.1 添加 scripts 文件夹

10.2 编辑 dev.js

10.3 编辑 build.js

10.4 编辑 package.json 文件

10.5 执行构建脚本，查看效果

猜你喜欢

8.4 构建打包查看效果