js: webpack插件的使用
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
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小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
