webpack
目的：
- プロジェクトから別のファイルにcssを抽出する機能
- 構成を使用して、パッケージ化されたリソースをhtmlに自動的にインポートできます
- clean-webpack-pluginを使用してパッケージディレクトリを空にすることができます
- cssコードとjsコードの圧縮最適化を行うことができます
プラグインはwebpackの機能を拡張するために使用されます。さまざまなプラグインにより、webpackは構築に関連するほとんどすべてのことを実行できます。
例えば：
- cssを別のファイルに抽出します
- パッケージディレクトリを空にします
- index.htmlをターゲットフォルダに自動的にコピーします
- …
プラグインの構成は非常に簡単です。プラグイン構成アイテムは配列を受け取ります。配列内の各アイテムは、使用されるプラグインのインスタンスです。プラグインに必要なパラメーターは、コンストラクターを介して渡されます。
プラグインを使用することの難しさは、プラグインをwebpackに導入する方法ではなく、プラグイン自体の構成項目にあります。webpackが直接実現できないほとんどすべての機能は、オープンソースプラグインで解決できます。私たちのニーズ対応するプラグインを見つけてください。
フォーマット：
module.exports = {
entry:
output:,
module:,
plugins:[] // 设置plugin
}
mini-css-extract-plugin
機能：このプラグインは、cssコードを別のファイルに抽出するのに役立ちます（スタイルでhtmlファイルに埋め込むのではありません）。
npm公式ウェブサイト：https：//www.npmjs.com/package/mini-css-extract-plugin
使用する：
- ダウンロードとインストール
- webpack.config.jsを構成します
- webpackを実行してパッケージ化し、効果を確認します
ダウンロードとインストール
これは開発の依存関係です。
npm install mini-css-extract-plugin -D
--------------------------------------
+ [email protected]
added 7 packages from 3 contributors in 10.363s
構成
webpack.config.jsで、次の3つの場所を変更します。
- プラグインを導入する
- より少ないローダーリストにローダーを追加する
- プラグインにmini-css-extract-pluginを追加します
次のように：
// node 中的核心模块
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//
{
test: /\.less$/, // 如果这个模块以less结尾
// 如果在打包的过程遇到了.less，则：从右向左
// 1. 先用less-loader 读出内容，转成css
// 2. 用css-loader 读出内容
// 3. 用postcss-loader 配合autoprefixer这个工具给需要前缀的样式添加前缀
// 4. style-loader把读出的内容以style标签的格式
// 附加在.html文件上
// use: ['style-loader','css-loader', 'postcss-loader', 'less-loader'] // 设置要处理的loader
use: [
{
loader: MiniCssExtractPlugin.loader,
options:{
publicPath: '../'}
},
'css-loader', 'postcss-loader', 'less-loader'
] // 设置要处理的loader
},
// ...
plugins:[
new MiniCssExtractPlugin({
filename:'css/[name].css'
})
]
}
試してみる。
この時点でcssは別のファイルに配置されているため、index.htmlにスタイルを導入する場合は、cssへの参照を手動で追加する必要があります。
html-webpack-plugin
問題：
cssを手動でインポートする必要があり、index.htmlをソースフォルダーからターゲットフォルダーに手動でコピーする必要があります...
どちらもhtml-webpack-pluginで解決できます。
機能：指定したパッケージエクスポートディレクトリに書き込んだ.htmlファイルをコピーし、関連するリソースコードを自動的に導入します。
キャッシュされた外部ファイルを参照する問題を防ぐために、各コンパイル後に、スクリプトやリンクなどのhtmlファイルで導入された外部リソースにハッシュを動的に追加します。HTMLエントリファイルを生成および作成できます。
公式ウェブサイト：https：//www.npmjs.com/package/html-webpack-plugin
実装手順：
ダウンロードとインストール
npm i html-webpack-plugin -D
------------------------------------
+ [email protected]
added 63 packages from 130 contributors in 42.462s
構成
webpack.config.jsで、次の2つのことを行います。
- プラグインを導入する
const HtmlWebpackPlugin = require('html-webpack-plugin');
- srcの下のindex.htmlをpulbic / index.htmlに移動します
- プラグイン構成を追加する
// node 中的核心模块
const path = require('path')
// console.log( path.resolve('./src/index.html') )
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new MiniCssExtractPlugin({
filename:'css/[name].css'
}),
new HtmlWebpackPlugin({
minify: {
// 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
// path.resolve()就是转成绝对路径
template: path.resolve('./public/index.html') // 指定模块的位置
})
]
}
-
パッケージテスト
- テンプレートで指定された.htmlファイルをエクスポートフォルダにコピー（圧縮）します
- パッケージ化された.cssおよび.jsコードも自動的に添付されます
回路図：
clean-webpack-plugin
パッケージファイルを生成する前に、エクスポートディレクトリをクリアしてください。
インストール
npm i clean-webpack-plugin -D
構成ファイルwebpack.config.jsを変更します
-
導入する：
const { CleanWebpackPlugin } = require('clean-webpack-plugin') -
プラグインを追加する
plugins:[
new CleanWebpackPlugin()，
其它...
]
再度パッケージ化するときに、権限がないことを示すプロンプトが表示された場合は、最初にエクスポートフォルダーを削除するのに役立ちます。
Error: EPERM: operation not permitted, lstat 'D:\webpack-learn\02-code\webpack-dev-111\build\css\main.css'
at Object.lstatSync (fs.js:1033:3)
あなたが試すことができます：
- vscodeのターミナルでpackagesコマンドを実行します
- アップルこれ：
sudo npx webpack - ウィンドウ：PowerShellを開くとき、
コード圧縮の最適化
梱包方法をに設定することを忘れないでください生产模式:mode: 'production'
-
cssを圧縮します
- プラグインをインストールする
npm i -D optimize-css-assets-webpack-plugin-
プラグインを構成する
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') module.exports= { optimization: { minimizer: [ new OptimizeCssAssetsWebpackPlugin() ] } }
-
jsコードのconsole.logを削除します
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
// ...
+ optimization: {
minimizer: [
// new OptimizeCssAssetsWebpackPlugin(),
new TerserWebpackPlugin({
parallel: 4,
extractComments: true,
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
}
}
})
]
},
}
概要
プラグインは、webpackの機能を向上させるために使用されます。
ステップ：
- ダウンロードとインストール
- webpack.config.jsを構成します
- 導入する
- プラグイン設定を追加する
欠点がある場合
は、継続するようにアドバイスしてください。更新を続けてください。
一緒に進歩しましょう！