cguser

计算机图形学应用 | 张盼的博客

0%

使用 webpack 的简易工作流配置

发表于 更新于 分类于 阅读次数： Valine：

说真的 webpack 这东西，我只会一点点，今天总结分享下如何配置简易的工作流。

项目结构

1
2
3
4
5
6
7
8
9
10
11
有“# ”表示文件夹，反之文件
# Demo (项目根目录)
    # build (用来存储打包好的文件，也就是最终的发布文件)
    # src (用来存储自己写的源文件)
    index.js (可以用来做为入口文件，我一般是用来做一些测试、不需要打包的代码写这里)
    index.html (运行的页面)
    package.json (网上说叫做模块的描述文件，说白了就是记录你项目的名称等信息，以及你按照的依赖包)
    readme.md (这个就是说明本项目的文档)
    webpack.common.js (这里就是你创建的公用webpack配置文件)
    webpack.dev.js (开发时的webpack配置文件)
    webpack.prod.js (发布时的webpack配置文件)

webpack.common.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const path = require("path");

module.exports = {
  entry: {
    index: "./src/Demo.js", //入口文件
  },
  output: {
    filename: "Demo.min.js", //输出文件名
    path: path.join(__dirname, "build"), //输出文件路径
    library: "DemoLib", //这个主要打包库，将打包文件暴露为名为 DemoLib 的全局变量
    libraryTarget: "umd", //在 AMD 或 CommonJS 的 require 之后可访问
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"], //在导入语句没带文件后缀时，webpack会自动带上后缀去尝试访问文件是否存在。
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, //仅匹配js/jsx文件
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-transform-runtime"], // babel 对一些公共方法使用了非常小的辅助代码
              cacheDirectory: true, // 将转译的结果缓存到文件系统 加快构建速度
            },
          },
        ],
        exclude: /node_modules/, //排除 node_modules
      },
    ],
  },
  performance: {
    hints: false, //不展示警告或错误提示。
  },
};

webpack.dev.js

1
2
3
4
5
6
7
8
9
10
const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    liveReload: false, //设为flase禁止每次修改保存后自动刷新页面
  },
});

webpack.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
  plugins: [
    new webpack.BannerPlugin({
      banner: `Demo.min.js\nv-1.0.0`,
    }), // 为每个打包文件头部添加 banner
  ],
});

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/Demo.js",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --progress",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "zp",
  "private": true,
  "license": "",
  "devDependencies": {
    "@babel/core": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "webpack": "^4.41.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.1",
    "lodash": "^4.17.20"
  }
}