js: webpack插件的使用

js: webpack插件的使用

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

执行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
  
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
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/115632702