阅读 276

自定义 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 (张文旗 <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 文件

  1. 新建 src 文件夹
  2. 新建 index.js 文件
console.log("Hello Webpack !");

复制代码

3.2 添加 webpack.config.js 文件

  1. 新建 config 文件夹
  2. 新建 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 执行结果

  1. 生成 dist 文件夹
  2. dist 目录下生成 main.js 文件
  3. 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 文件

  1. 新建 public 文件夹
  2. 新建 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 页面,编辑页面保存后,页面自动刷新


代码仓库

参考链接