摘要：前言對(duì)于的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說(shuō)一說(shuō)的一些常用插件，以及用法。如果在一個(gè)前面加了它會(huì)被定義為調(diào)用?；蛘弑荒K的導(dǎo)出的內(nèi)容所賦值，以支持命名導(dǎo)出。用于生成的文檔的標(biāo)題默認(rèn)為將寫(xiě)入的文件默認(rèn)模板的相對(duì)或絕對(duì)路徑。

對(duì)于webpack的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說(shuō)一說(shuō)webpack的一些常用插件，以及用法。

1.內(nèi)置插件

2.其他插件

如果這個(gè)值是一個(gè)字符串，它會(huì)被當(dāng)作一個(gè)代碼片段來(lái)使用。

如果這個(gè)值不是字符串，它會(huì)被轉(zhuǎn)化為字符串(包括函數(shù))。

如果這個(gè)值是一個(gè)對(duì)象，它所有的 key 會(huì)被同樣的方式定義。

如果在一個(gè) key 前面加了 typeof,它會(huì)被定義為 typeof 調(diào)用。

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");

自動(dòng)加載模塊，而不必到處 import 或 require 。
任何時(shí)候，當(dāng) identifier 被當(dāng)作未賦值的變量時(shí)，module 就會(huì)自動(dòng)被加載，并且 identifier 會(huì)被這個(gè) module 導(dǎo)出的內(nèi)容所賦值。（或者被模塊的 property 導(dǎo)出的內(nèi)容所賦值，以支持命名導(dǎo)出(named export)）。

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

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

對(duì)于 ES2015 模塊的 default export，你必須指定模塊的 default 屬性。

拷貝文件夾或文件到指定目錄

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

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: "source", to: "dest" },
      { 
          from: "other",
          to: "public",
          ignore: ["*.js"],
          flatten: false,  //僅復(fù)制文件。用于文件夾和文件同名時(shí)
      },
    ]),
  ],
};https://webpack.docschina.org/plugins/copy-webpack-plugin/#ignore

查看更多

該插件將為你生成一個(gè)HTML文件，其中包括使用script標(biāo)簽中引入webpack打包js。
如果你有多個(gè)webpack入口點(diǎn)，他們都會(huì)在生成的HTML文件中的script標(biāo)簽內(nèi)。
如果你有任何CSS assets在webpack的輸出中（例如，利用MiniCssExtractPlugin提取 CSS），那么這些將被包含在HTML head中的標(biāo)簽內(nèi)。

    new HtmlWebpackPlugin({
      title: "Webpack App"  //用于生成的HTML文檔的標(biāo)題 默認(rèn)為Webpack App
      filename: "index.html", //將HTML寫(xiě)入的文件 默認(rèn)index.html
      template: "index.html", //webpack模板的相對(duì)或絕對(duì)路徑。默認(rèn)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, //將它錯(cuò)誤信息寫(xiě)入頁(yè)面
    }),

把打包文件中的文本提取到一個(gè)文件通常用于提取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
   })
]

    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /.optimize.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true,
      parallel: true
    }),

提供了一個(gè)簡(jiǎn)單的 web server，并且具有 live reloading(實(shí)時(shí)重新加載) 功能

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

查看詳細(xì)配置

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 配置文件作為基礎(chǔ)配置
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)