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

框架

浏览数:488

2019-5-11

前言

对于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)

作者:不快乐的程序员