开发者社区> 程序猿v> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js: webpack插件的使用

简介: js: webpack插件的使用
+关注继续查看

执行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: blue;
}

./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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原生js写的一个下拉框功能插件
用原生js写的一个下拉框功能插件
0 0
【译】设计一个JavaScript插件系统
【译】设计一个JavaScript插件系统
0 0
如何优雅地编写一个高逼格的JS插件惊艳你的领导和同事?
从前端模块化发展历程详细讲解如何开始编写一个JS插件,纯干货。
0 0
js:cocomessage消息提示插件
js:cocomessage消息提示插件
0 0
js:webpack插件BannerPlugin添加版权信息
js:webpack插件BannerPlugin添加版权信息
0 0
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
0 0
VSCode插件 code runner执行PHP,JavaScript,Python
VSCode插件 code runner执行PHP,JavaScript,Python
0 0
FullCalendar - 开源的多功能 JavaScript 日历插件
FullCalendar 是一个支持 React、Vue、Angular 和原生 JavaScript 的日历插件,FullCalendar 拥有超过 300 种设置,支持模块化导入,几乎可以实现任何效果。
0 0
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
0 0
Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
详情请查看 http://aehyok.com/Blog/Detail/25.html   个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
482 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载