一起來了解下這些webpack常用外掛
摘要：
前言
對於webpack的配置以及常用模組大家應該都比較熟悉，本文將說一說webpack的一些常用外掛，以及用法。
目錄
1.內建外掛
名稱
引數
說明
用法
...
前言
對於webpack的配置以及常用模組大家應該都比較熟悉，本文將說一說webpack的一些常用外掛，以及用法。
目錄
1.內建外掛
| 名稱 | 引數 | 說明 | 用法 |
|---|---|---|---|
| DefinePlugin | Object | 編譯時配置的全域性常量，開發模式和釋出模式的構建允許不同的行為非常有用 | |
| HotModuleReplacementPlugin | - | 熱更新模組 | |
| NoEmitOnErrorsPlugin | - | 打包出錯時不把錯誤輸出到檔案 | |
| NamedModulesPlugin | - | 顯示模組相對路徑 | |
| ProvidePlugin | - | 自動載入模組 | |
| PrefetchPlugin | context: 目錄的絕對路徑，request: 模組路徑 | 預載入模組請求 |
2.其他外掛
| 名稱 | 引數 | 說明 | 用法 |
|---|---|---|---|
| CopyWebpackPlugin | Array | 拷貝資料夾或檔案到指定目錄 | |
| HtmlWebpackPlugin | - | 在編譯目錄下生成html，並將打包後的js檔案插入script標籤中 | |
| ExtractTextPlugin | - | 把打包檔案中的文字提取到一個檔案 | |
| OptimizeCSSPlugin | - | 優化壓縮css檔案 | |
| UglifyJsPlugin | - | 壓縮JavaScript檔案 | |
| WebpackDevServer | 提供了一個簡單的 web server，並且具有 live reloading(實時重新載入) 功能 | ||
| WebpackHotMiddleware | 把 webpack 處理過的檔案傳送到一個 server |
用法介紹
- 如果這個值是一個字串，它會被當作一個程式碼片段來使用。
- 如果這個值不是字串，它會被轉化為字串(包括函式)。
- 如果這個值是一個物件，它所有的 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');
自動載入模組，而不必到處 import 或 require 。
任何時候，當 identifier 被當作未賦值的變數時，module 就會自動被載入，並且 identifier 會被這個 module 匯出的內容所賦值。（或者被模組的 property 匯出的內容所賦值，以支援命名匯出(named export)）。
new webpack.ProvidePlugin({
identifier: 'module1',
// ...
});
new webpack.ProvidePlugin({
identifier: ['module1', 'property1'],
// ...
});
對於 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,//僅複製檔案。用於資料夾和檔案同名時
},
]),
],
};https://webpack.docschina.org/plugins/copy-webpack-plugin/#ignore
該外掛將為你生成一個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, //將它錯誤資訊寫入頁面
}),
把打包檔案中的文字提取到一個檔案通常用於提取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
}),
提供了一個簡單的 web server，並且具有 live reloading(實時重新載入) 功能
module.exports = {
devServer: {
contentBase: './dist'
}
};
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)