js: webpack插件的使用

网友投稿 496 2022-05-30

js: webpack插件的使用

webpack中文文档: https://webpack.docschina.org/concepts/

webpack插件的使用

一、js压缩插件UglifyJsPlugin

二、css提取插件:MiniCssExtractPlugin

三、 生成html插件 HtmlWebpackPlugin

四、使用开发服务器 devServer

执行webpack

$ npx webpack

1

一、js压缩插件UglifyJsPlugin

https://www.npmjs.com/package/uglifyjs-webpack-plugin

依赖 package.json

{ "devDependencies": { "uglifyjs-webpack-plugin": "^2.2.0", "webpack": "^5.31.2", "webpack-cli": "^4.6.0" } }

1

2

3

4

5

6

7

8

用于测试的js

./src/index.js

// 输出字符串 function hello() { console.log("hello"); } hello(); // 加法运算 function addNumber(a, b) { return a + b; } console.log(addNumber(1, 2)); console.log(addNumber(1, 3));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1、直接输出js

./dist/main.js

(()=>{function o(o,l){return o+l}console.log("hello"),console.log(o(1,2)),console.log(o(1,3))})();

1

2、使用插件UglifyJsPlugin 对 js文件进行压缩

webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { // 默认值 // entry: './src/index.js', // output: './dist/main.js', optimization: { minimizer: [new UglifyJsPlugin()], }, mode: "production", // 'development' or 'production' };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

输出结果:

./dist/main.js

console.log("hello"),console.log(3),console.log(4);

1

二、css提取插件:MiniCssExtractPlugin

https://www.npmjs.com/package/mini-css-extract-plugin

依赖 package.json

{ "devDependencies": { "css-loader": "^5.2.1", "mini-css-extract-plugin": "^1.4.1", "webpack": "^5.31.2", "webpack-cli": "^4.6.0" } }

1

2

3

4

5

6

7

8

9

./src/style-1.css

body { background: blue; }

1

2

3

4

./src/style-2.css

body { background: green; }

1

2

3

4

./src/index.js

import './style-1.css'; import './style-2.css';

1

2

3

webpack默认不处理css文件,使用css-loader处理

webpack.config.js

module.exports = { // 默认值 // entry: './src/index.js', // output: './dist/main.js', module: { rules: [ { test: /\.css$/i, use: ["css-loader"], }, ], }, mode: "production", // 'development' or 'production' };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

输出如下

(() => { "use strict"; var n = { 634: (n, r, t) => { var o = t(587); t.n(o)()(function (n) { return n[1]; }).push([n.id, "body {\n background: blue;\n}\n", ""]); }, 358: (n, r, t) => { var o = t(587); t.n(o)()(function (n) { return n[1]; }).push([n.id, "body {\n background: green;\n}\n", ""]); }, 587: (n) => { n.exports = function (n) { var r = []; return ( (r.toString = function () { return this.map(function (r) { var t = n(r); return r[2] ? "@media ".concat(r[2], " {").concat(t, "}") : t; }).join(""); }), (r.i = function (n, t, o) { "string" == typeof n && (n = [[null, n, ""]]); var e = {}; if (o) for (var a = 0; a < this.length; a++) { var u = this[a][0]; null != u && (e[u] = !0); } for (var i = 0; i < n.length; i++) { var c = [].concat(n[i]); (o && e[c[0]]) || (t && (c[2] ? (c[2] = "".concat(t, " and ").concat(c[2])) : (c[2] = t)), r.push(c)); } }), r ); }; }, }, r = {}; function t(o) { var e = r[o]; if (void 0 !== e) return e.exports; var a = (r[o] = { id: o, exports: {} }); return n[o](a, a.exports, t), a.exports; } (t.n = (n) => { var r = n && n.__esModule ? () => n.default : () => n; return t.d(r, { a: r }), r; }), (t.d = (n, r) => { for (var o in r) t.o(r, o) && !t.o(n, o) && Object.defineProperty(n, o, { enumerable: !0, get: r[o] }); }), (t.o = (n, r) => Object.prototype.hasOwnProperty.call(n, r)), t(634), t(358); })();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

js: webpack插件的使用

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

使用插件 MiniCssExtractPlugin 将css单独抽离出来

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // 默认值 // entry: './src/index.js', // output: './dist/main.js', plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, mode: "production", // 'development' or 'production' };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

输出了一个新的css文件

./dist/main.css

body { background: blue; } body { background: green; }

1

2

3

4

5

6

7

8

9

三、 生成html插件 HtmlWebpackPlugin

https://www.npmjs.com/package/html-webpack-plugin

依赖 package.json

{ "devDependencies": { "html-webpack-plugin": "^5.3.1", "webpack": "^5.31.2", "webpack-cli": "^4.6.0" } }

1

2

3

4

5

6

7

8

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new HtmlWebpackPlugin() ] }

1

2

3

4

5

6

7

四、使用开发服务器 devServer

依赖 package.json

{ "devDependencies": { "webpack": "^5.31.2", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2" } }

1

2

3

4

5

6

7

8

实现自动热更新

const path = require('path'); module.exports = { // 默认值 // entry: './src/index.js', // output: './dist/main.js', devServer: { contentBase: path.join(__dirname, 'dist'), port: 9000, hot: true, open: true, }, mode: "development", // 'development' or 'production' };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

启动

$ npx webpack serve

1

CSS webpack

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:前端常用标签集合(一)
下一篇:Kubernetes学习必备-awesome-kubernetes-notes
相关文章