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

23次阅读

共计 3902 个字符,预计需要花费 10 分钟才能阅读完成。

前言

对于 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 中的 <link> 标签内。

    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!\n');
});

也可以配合 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)

正文完
 0