webpack

9fb059ad565a12d5ec8a47600ff8ccfe

webpack

项目搭建-通用

  1. 配置文件
  2. 安装依赖
  1. 配置文件

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
28
29
30
31
32
33
>{
"name": "snakesgame",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "start": "webpack serve --open"
},
"private": true,
"devDependencies": {
  "@babel/core": "^7.24.4",
  "@babel/preset-env": "^7.24.4",
  "babel-loader": "^9.1.3",
  "clean-webpack-plugin": "^4.0.0",
  "core-js": "^3.37.0",
  "css-loader": "^7.1.1",
  "html-webpack-plugin": "^5.6.0",
  "less": "^4.2.0",
  "less-loader": "^12.2.0",
  "postcss": "^8.4.38",
  "postcss-loader": "^8.1.1",
  "postcss-preset-env": "^9.5.9",
  "style-loader": "^4.0.0",
  "ts-loader": "^9.5.1",
  "typescript": "^5.4.5",
  "webpack": "^5.91.0",
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^5.0.4"
}
>}

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
>{
>"compilerOptions": {
 "target": "es2016",
 "module": "ES6",
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "strict": true,
 "skipLibCheck": true,
 "noEmitOnError": true
>}
>}

webpack.config.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
>// 引入一个包
>const path = require('path');
>// 引入html插件
>const HTMLWebpackPlugin = require('html-webpack-plugin');
>// 引入clean插件
>const {CleanWebpackPlugin} = require('clean-webpack-plugin');

>// webpack中的所有的配置信息都应该写在module.exports中
>module.exports = {
 mode: 'development',
 // 指定入口文件
 entry: "./src/index.ts",

 // 指定打包文件所在目录
 output: {
     // 指定打包文件的目录
     path: path.resolve(__dirname, 'dist'),
     // 打包后文件的文件
     filename: "bundle.js",

     // 告诉webpack不使用箭头
     environment: {
         arrowFunction: false,
         // 不使用const,此时兼容IE 10
         const: false
     }
 },

 // 指定webpack打包时要使用模块
 module: {
     // 指定要加载的规则
     rules: [
         {
             // test指定的是规则生效的文件
             test: /\.ts$/,
             // 要使用的loader
             use: [
                 // 配置babel
                 {
                     // 指定加载器
                     loader: "babel-loader",
                     // 设置babel
                     options: {
                         // 设置预定义的环境
                         presets: [
                             [
                                 // 指定环境的插件
                                 "@babel/preset-env",
                                 // 配置信息
                                 {
                                     // 要兼容的目标浏览器
                                     targets: {
                                         "chrome": "58",
                                         "ie": "11"
                                     },
                                     // 指定corejs的版本
                                     "corejs": "3",
                                     // 使用corejs的方式 "usage" 表示按需加载
                                     "useBuiltIns": "usage"
                                 }
                             ]
                         ]
                     }
                 },
                 'ts-loader'
             ],
             // 要排除的文件
             exclude: /node-modules/
         },

         // 设置less文件的处理
         {
             test: /\.less$/,
             use: [
                 "style-loader",
                 "css-loader",

                 // 引入postcss
                 // 类似于babel，把css语法转换兼容旧版浏览器的语法
                 {
                     loader: "postcss-loader",
                     options: {
                         postcssOptions: {
                             plugins: [
                                 [
                                     // 浏览器兼容插件
                                     "postcss-preset-env",
                                     {
                                         // 每个浏览器最新两个版本
                                         browsers: 'last 2 versions'
                                     }
                                 ]
                             ]
                         }
                     }
                 },
                 "less-loader"
             ]
         }
     ]
 },

 // 配置Webpack插件
 plugins: [
     new CleanWebpackPlugin(),
     new HTMLWebpackPlugin({
         // title: "这是一个自定义的title"
         template: "./src/index.html"
     }),
 ],

 // 用来设置引用模块
 resolve: {
     extensions: ['.ts', '.js']
 }

>};
  1. 安装依赖
1
>pnpm install
  1. 热部署
1
>npm start
  1. 打包
1
>npm run build