0
点赞
收藏
分享

微信扫一扫

js: webpack插件的使用

静守幸福 2022-02-13 阅读 36
csshtmljson


js: webpack插件的使用

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


webpack插件的使用


  • ​​一、js压缩插件UglifyJsPlugin​​
  • ​​二、css提取插件:MiniCssExtractPlugin​​
  • ​​三、 生成html插件 HtmlWebpackPlugin​​
  • ​​四、使用开发服务器 devServer​​


执行webpack

$ npx webpack

一、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"
}
}

用于测试的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、直接输出js

./dist/main.js

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

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'
};

输出结果:

./dist/main.js

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

二、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"
}
}

./src/style-1.css

body {
background: blue;
}

./src/style-2.css

body {
background: green;
}

./src/index.js

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

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'
};

输出如下

(() => {
"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);
})();

使用插件 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'
};

输出了一个新的css文件

./dist/main.css

body {
background: blue;
}

body {
background: green;
}

三、 生成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"
}
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
}

四、使用开发服务器 devServer

依赖 package.json

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

实现自动热更新

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'
};

启动

$ npx webpack serve



举报

相关推荐

0 条评论