cguser

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

0%

使用 webpack 的简易工作流配置

说真的 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"
}
}