黄兵的个人博客

新项目 webpack 打包基本步骤

在使用 Flask 开发的应用，由于 js、css、image 文件分散各处，同时页面加载的时候也需要一个个加载，不利于 SEO，同时会拖慢页面加载速度，所以 webpack 应运而生，使用 webpack 可以将这些文件打包，下面是官方的原理图：

由于官方方方面面都讲了，导致我们很难知道一个新项目我们应该如何使用 webpack，应该怎么设置，我面我根据我的总结，写下了这篇总结性的文章，文章中难免有错误，欢迎大家指正：

1、初始化 npm，之后安装 webpack，接着安装 webpack-cli（用于在命令行中运行 webpack）：

npm init -y
npm install webpack webpack-cli --save-dev

2、新建一个 src 文件夹，里面是 index.ts 文件：

官方的目录结构：

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

由于我这里习惯使用 Typescript，所以没有使用 js 文件，这个需要根据大家习惯

之后我们再新建一个 webpack.config.js 文件，这个主要是在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多。

最后项目结构变成了如下的样子：

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

之后是 webpack.config.js 的文件内容，可以根据项目情况修改，同时有些参数不是很了解，可以查看官方文档，官方文档地址我已经放在参考资料哪里：

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

const isProduction = process.env.NODE_ENV === "production";

const stylesHandler = isProduction
    ? MiniCssExtractPlugin.loader
    : "style-loader";

const config = {
    entry: {
        'page_init': "/src/index.ts",
    },
    output: {
        // 在生成文件之前清空 output 目录
        clean: true,
        filename: '[name]-[fullhash].bundle.js',
        path: path.resolve(__dirname, "./static/dist"),
    },
    devServer: {
        open: true,
        host: "localhost",
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./app/templates/crawler_base.html",
        }),

        new MiniCssExtractPlugin({
            // 类似于 webpackOptions.output 中的选项
            // 所有选项都是可选的
            filename: '[name]-[fullhash].min.css',
            chunkFilename: '[id].min.css',
        }),

        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/i,
                loader: "ts-loader",
                exclude: ["/node_modules/"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
            },
            {
                test: /\.css$/i,
                use: [stylesHandler, "css-loader", "postcss-loader"],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: "asset",
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
            // `...`,
            new CssMinimizerPlugin(),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            })
        ],
    },
    resolve: {
        // 用于配置程序可以自行补全哪些文件后缀
        extensions: [".tsx", ".ts", ".js", ".css", ".json"],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = "production";

        config.plugins.push(new MiniCssExtractPlugin());

        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
    } else {
        config.mode = "development";
    }
    return config;
};

之后是 index.ts 文件里面主要是引入需要打包的 js 文件与 css 文件，我的 index.ts 文件示例：

import '../static/css/parse.css'
import '../static/css/json-render-formatter/json-formatter.css'
import '../static/css/styles.css'

这里直接 import 导入需要打包的文件，最后会被打包成一个 .min.css 的压缩🗜文件。

3、修改 package.json 文件：

原来内容：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

修改后的内容：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode=production --node-env=production",
  "build:dev": "webpack --mode=development",
  "build:prod": "webpack --mode=production --node-env=production",
  "watch": "webpack --watch",
  "serve": "webpack serve"
},

上面主要是我们如果需要打包，直接点击 build:prod 就会自动运行打包了，非常方便。

如下图所示，我再 PyCharm 右边会出现一个 运行的按钮，直接点击运行就可以运行 webpack 绑定工作了。

我们再修改 devDependencies 节内容，增加相关安装包：

原来是：

"devDependencies": {
  "html-webpack-plugin": "^5.5.0",
  "mini-css-extract-plugin": "^2.6.0",
  "webpack": "^5.72.0",
  "webpack-cli": "^4.9.2",
  "workbox-webpack-plugin": "^6.3.0"
},

修改之后变成如下内容：

"devDependencies": {
  "@webpack-cli/generators": "^2.3.0",
  "autoprefixer": "^10.3.3",
  "critical": "^4.0.1",
  "css-loader": "^6.2.0",
  "html-webpack-plugin": "^5.3.2",
  "mini-css-extract-plugin": "^2.2.2",
  "postcss": "^8.3.6",
  "postcss-loader": "^6.1.1",
  "prettier": "^2.3.2",
  "sass": "^1.39.0",
  "sass-loader": "^12.1.0",
  "style-loader": "^3.2.1",
  "terser-webpack-plugin": "^5.2.3",
  "ts-loader": "^9.2.5",
  "typescript": "^4.4.2",
  "webpack": "^5.51.1",
  "webpack-cli": "^4.8.0",
  "webpack-dev-server": "^4.1.0",
  "workbox-webpack-plugin": "^6.2.4"
},

注意上面由于我们使用了 Typescript 所以我们也增加了 typescript 的相关包。

4、新增 tsconfig.json 文件：

在项目根目录下增加tsconfig.json，具体文件内容如下：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true
  },
  "files": ["src/index.ts"]
}

这个文件主要是说明 Typescript 编译的时候一些配置。

5、安装相关依赖包：

如果在运行的时候出现如下错误：

Error: Cannot find module 'html-webpack-plugin'

或者其他类似错误，说明没有安装相关的依赖包，我们直接控制台安装依赖包，如下命令：

npm install --save-dev html-webpack-plugin

当我们不知道怎么输入这个包的安装命令，我们可以到 webpack 的中文官方文章，直接输入这个插件的名称，就会出现详细的信息。

之后会出现此插件的详细信息，我们按照文档的方法安装就可以了，截图如下：

6、/static 文件夹下新建 dist 文件夹：

这个文件主要是保存输入的 webpack 打包文件：

以上就是我在使用 webpack 时候的基本步骤，当然这里也有很多问题，例如，导入的 css、js 应该分开，具体没有研究怎么配置，不需要打包的直接注释就可以了，还是有点麻烦。

以后再慢慢解决吧！

参考资料：

1、webpack - 起步

2、github - webpack-cli

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - 新项目 webpack 打包基本步骤