资讯专栏INFORMATION COLUMN

一起来了解下这些webpack常用插件

makeFoxPlay / 1545人阅读

摘要:前言对于的配置以及常用模块大家应该都比较熟悉,本文将说一说的一些常用插件,以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值,以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。

前言
对于webpack的配置以及常用模块大家应该都比较熟悉,本文将说一说webpack的一些常用插件,以及用法。
目录

1.内置插件

名称 参数 说明 用法
DefinePlugin Object 编译时配置的全局常量,开发模式和发布模式的构建允许不同的行为非常有用 DefinePlugin
HotModuleReplacementPlugin - 热更新模块
NoEmitOnErrorsPlugin - 打包出错时不把错误输出到文件
NamedModulesPlugin - 显示模块相对路径
ProvidePlugin - 自动加载模块 ProvidePlugin
PrefetchPlugin context: 目录的绝对路径,request: 模块路径 预加载模块请求

2.其他插件

名称 参数 说明 用法
CopyWebpackPlugin Array 拷贝文件夹或文件到指定目录 CopyWebpackPlugin
HtmlWebpackPlugin - 在编译目录下生成html,并将打包后的js文件插入script标签中 HtmlWebpackPlugin
ExtractTextPlugin - 把打包文件中的文本提取到一个文件 ExtractTextPlugin
OptimizeCSSPlugin - 优化压缩css文件 OptimizeCSSPlugin
UglifyJsPlugin - 压缩JavaScript文件 UglifyJsPlugin
WebpackDevServer 提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能 WebpackDevServer
WebpackHotMiddleware 把 webpack 处理过的文件发送到一个 server webpackHotMiddleware
用法介绍 DefinePlugin

如果这个值是一个字符串,它会被当作一个代码片段来使用。

如果这个值不是字符串,它会被转化为字符串(包括函数)。

如果这个值是一个对象,它所有的 key 会被同样的方式定义。

如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object"),
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
});
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
ProvidePlugin

自动加载模块,而不必到处 import 或 require 。
任何时候,当 identifier 被当作未赋值的变量时,module 就会自动被加载,并且 identifier 会被这个 module 导出的内容所赋值。(或者被模块的 property 导出的内容所赋值,以支持命名导出(named export))。

new webpack.ProvidePlugin({
  identifier: "module1",
  // ...
});

new webpack.ProvidePlugin({
  identifier: ["module1", "property1"],
  // ...
});

对于 ES2015 模块的 default export,你必须指定模块的 default 属性。

CopyWebpackPlugin

拷贝文件夹或文件到指定目录

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: "source", to: "dest" },
      { 
          from: "other",
          to: "public",
          ignore: ["*.js"],
          flatten: false,  //仅复制文件。用于文件夹和文件同名时
      },
    ]),
  ],
};https://webpack.docschina.org/plugins/copy-webpack-plugin/#ignore

查看更多

HtmlWebpackPlugin

该插件将为你生成一个HTML文件,其中包括使用script标签中引入webpack打包js。
如果你有多个webpack入口点,他们都会在生成的HTML文件中的script标签内。
如果你有任何CSS assets在webpack的输出中(例如,利用MiniCssExtractPlugin提取 CSS),那么这些将被包含在HTML head中的标签内。

    new HtmlWebpackPlugin({
      title: "Webpack App"  //用于生成的HTML文档的标题 默认为Webpack App
      filename: "index.html", //将HTML写入的文件 默认index.html
      template: "index.html", //webpack模板的相对或绝对路径。默认src/index.ejs
      //template: path.resolve(__dirname, "../index.ejs"),
      inject: true, //true || "head" || "body" || false  打包后的js引入位置 body/head
      favicon: String,
      meta: Object,
      base: Object|String|false,
      showErrors: Boolean, //将它错误信息写入页面
    }),
ExtractTextPlugin

把打包文件中的文本提取到一个文件通常用于提取css

//webpack4
module: {
  rules: [
    {
      test: /.css$/,
       use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader",
         publicPath: "/dist"
       })
    }
  ]
}

plugins: [
   new ExtractTextPlugin({
     filename: "bundle.css",
     disable: false,
     allChunks: true
   })
]
OptimizeCSSPlugin
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /.optimize.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
UglifyJsPlugin
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true,
      parallel: true
    }),
WebpackDevServer

提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能

module.exports = {
    devServer: {
      contentBase: "./dist"
    }
  };

查看详细配置

WebpackHotMiddleware
const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

const app = express();
const config = require("./webpack.config.js");
const compiler = webpack(config);

// 告诉 express 使用 webpack-dev-middleware,
// 以及将 webpack.config.js 配置文件作为基础配置
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log("Example app listening on port 3000!
");
});

也可以配合devServer

    const WebpackDevServer = require("webpack-dev-server")
    
    const compiler = webpack(webpack.conf)
    hotMiddleware = webpackHotMiddleware(compiler, {
      log: false,
      //path
      heartbeat: 2500
    })
    const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, "../"),
        quiet: true,
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            
          })
        }
      }
    )
    server.listen(3000)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54967.html

相关文章

  • 起来了解这些webpack常用插件

    摘要:前言对于的配置以及常用模块大家应该都比较熟悉,本文将说一说的一些常用插件,以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值,以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。 前言 对于webpack的配置以及常用模块大家应该都比较熟悉,本文将说一说webpack的一些常用插件,以及用法。 目录 1.内置插件 名称 参数 说明...

    gggggggbong 评论0 收藏0
  • 带你了解webpack

    摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...

    senntyou 评论0 收藏0
  • 带你了解webpack

    摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...

    Tamic 评论0 收藏0
  • webpack原理

    摘要:原理查看所有文档页面前端开发文档,获取更多信息。初始化阶段事件名解释初始化参数从配置文件和语句中读取与合并参数,得出最终的参数。以上处理的相关配置如下编写编写的职责由上面的例子可以看出一个的职责是单一的,只需要完成一种转换。 webpack原理 查看所有文档页面:前端开发文档,获取更多信息。原文链接:webpack原理,原文广告模态框遮挡,阅读体验不好,所以整理成本文,方便查找。 工作...

    trigkit4 评论0 收藏0

发表评论

0条评论

makeFoxPlay

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<