Webpack 4.xを使用して独自のフロントエンド開発環境をカスタマイズ
12507 ワード
一、最も基礎的な環境
1、環境の初期化
2,webpack webpack-cliをインストールする
3,package.jsonにscriptを追加
"scripts": { "build": "webpack --mode production"}
4、プロジェクトディレクトリの下にファイルsrc/index.jsを追加します.
(これはwebpackのデフォルトのエントリファイルです)
5、コマンドの実行
6,webpack.config.jsの基本内容
基本解析:
注意:loaderとpluginsは別々にインストールする必要があります.devDependenciesにインストールする必要があります.これらのプラグインはコードを構築するときに役立つからです.
二、常用plugins
1,UglifyPlugin
これはjsコード圧縮に使用されます
2,html-webpack-plugin
このユーザーは、パッケージされたjsファイルをindex.htmlデフォルトエントリファイルがルートディレクトリのindex.htmlエクスポートファイルデフォルトdistディレクトリのindex.tmlに動的に挿入します.
自分で定義できる
⚠️なぜこのプラグインが必要ですか?なぜ動的に挿入するのですか?主に,ブラウザキャッシュを防止するためにパッケージ化を行うため,パッケージ化されたファイルに[hash]を追加する必要があることが多いためである.動的に挿入する必要があります
3,extract-text-webpack-plugin@next
css-loader&style-loaderだけでコードを変換すると、cssはjsコードをhtmlに動的に挿入するようにプログラミングします.cssを単独でファイルにするには、このpluginを使用する必要があります.
4,DefinePlugin
DefinePluginはwebpackに内蔵されたプラグインで、webpack.DefinePluginを使って直接入手できます.
このプラグインは、コンパイル時に構成できるグローバル定数を作成するために使用されます.これらの定数の値は、webpackの構成で指定できます.たとえば、次のようにします.
5,copy-webpack-plugin
開発したすべてのソースコードとリソースファイルをsrc/ディレクトリの下に配置し、構築時にbuild/ディレクトリを生成します.通常、buildのすべてのファイルを直接パブリッシュします.一部のファイルはwebpack処理されていませんが、buildディレクトリにも表示されることを望んでいます.この場合、CopyWebpackPluginを使用して処理できます.
一般開発では、ルートディレクトリの下にstaticディレクトリが直接コピーされます.
6,ProvidePlugin
ProvidePluginもwebpackに内蔵されたプラグインで、直接webpack.ProvidePluginを使用して取得できます.
このコンポーネントは、アプリケーションの実行時の変数として一部のモジュールを参照するために使用されます.これにより、毎回requireまたはimportを使用する必要がなくなり、比較的簡単に使用できます.
あなたのコードでは、identifierが割り当てられていない変数として扱われると、moduleは自動的にロードされ、identifierという変数、すなわちmoduleが外部に露出している内容です.
ESのdefault exportの場合は、モジュールのdefaultプロパティ:identifier:['module','default']を指定する必要があります.
7,IgnorePlugin
IgnorePluginはProvidePluginと同様にwebpackに内蔵されたプラグインで、直接webpack.IgnorePluginを使用して取得できます.
このプラグインは、特定のモジュールを無視して、webpackが指定したモジュールをパッケージ化しないようにします.例えばmoment.jsを使用して、直接引用した後、大量のi 18 nのコードが入っていて、最後にパッケージされたファイルが比較的大きいことを招きますが、実際のシーンではこれらのi 18 nのコードは必要ありません.この場合、IgnorePluginを使用してこれらのコードファイルを無視することができます.
8,optimize-css-assets-webpack-plugin
cssコード圧縮
三、常用loaders
1,babel-loader
このloaderはes 6+コードをes 5からコードに変換することができる.ブラウザはes 6のコード互換性が悪いためですが、es 6の多くの新しい文法は私たちの開発作業に向上しています.だからes 6コードを変換する必要があります.
2,css-loader & style-loader
css-loaderはCSSコードの解析を担当し、主にCSSの依存を処理するため、例えば@importやurl()などの外部ファイルを参照する声明を処理する.style-loaderはcss-loader解析の結果をJSコードに変換し、実行時にstyleラベルを動的に挿入してCSSコードを有効にします.
注意:['style-loader','css-loader']ここでの構成は順序がありますが、ルール適用順序は右から左です.つまりcss-loader、style-loader
segmentfault.com/a/119000001…
3,less-loader
cssプリコンパイラ
4,file-loader & url-loader & image-webpack-loader
file-loaderは画像ファイルの処理に使用できます
簡単に言えばurl-loaderはfile-loaderをカプセル化している.url-loaderはfile-loaderに依存しません.url-loaderを使用する場合はurl-loaderをインストールするだけでいいです.url-loaderにはfile-loaderが内蔵されているため、file-loaderをインストールする必要はありません.
上記の説明では、url-loaderの作業には2つの状況があります.
1)ファイルサイズがlimitパラメータより小さい場合、url-loaderはファイルをDataURLに変換します.
2)ファイルサイズがlimitより大きい場合、url-loaderはfile-loaderを呼び出して処理し、パラメータもfile-loaderに直接渡されます.したがってurl-loaderをインストールするだけでいいです.
image-webpack-loaderは画像圧縮に使用できます
5,NamedModulesPlugin(), && HotModuleReplacementPlugin()
ホットモジュール置換関連
plugins:[//...new webpack.NamedModulesPlugin()//HMR起動時にモジュールの相対パスを表示できるnew webpack.HotModuleReplacementPlugin()//Hot Module Replacementのプラグイン],
四、ローカルサーバwebpack-dev-server&webpack-dev-middleware
1,webpack-dev-server使用
scriptの追加
New webpack.NamedModulesPlugin()//HMR起動時にモジュールの相対パスを表示できるnew webpack.HotModuleReplacementPlugin()//Hot Module Replacementのプラグイン
Webpack-dev-server詳細構成を表示https://webpack.docschina.org/configuration/dev-server/
yarn add webpack-dev-server -D
2,webpack-dev-middleware使用
Webpack-dev-middlewareを使用して静的サーバを起動することもできます.まず、Webpack-dev-middleware依存性をインストールします.
次に、app.jsなどのNode.jsサービスのスクリプトファイルを作成します.
プロファイルのパス
//ローカル開発環境デフォルトではdevelopment modeを使用
scriptの追加
五、分割の構成
Webpack.base.js:基本部分、すなわち複数のファイルで共有される構成Webpack.development.js:開発環境で使用される構成Webpack.production.js:本番環境で使用される構成です.そのため、複数の構成オブジェクトを比較的スマートに統合できるツールがあれば、簡単にWebpack構成を分割し、環境変数を判断することができます.ツールを使用して、対応する環境の複数の構成オブジェクトを統合してwebpackに提供します.このツールがwebpack-mergeです.
転載先:https://juejin.im/post/5cc5cdcef265da03775c5ade
1、環境の初期化
yarn init （npm init）
2,webpack webpack-cliをインストールする
webpack-cli 4.0 webpack ， ，
yarn add webpack
yarn add webpack-cli
3,package.jsonにscriptを追加
"scripts": { "build": "webpack --mode production"}
4、プロジェクトディレクトリの下にファイルsrc/index.jsを追加します.
(これはwebpackのデフォルトのエントリファイルです)
5、コマンドの実行
yarn run dev
6,webpack.config.jsの基本内容
const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, 'src')]
},
],
},
//
resolve: {
modules: [
"node_modules",
path.resolve(__dirname, 'src')
],
extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
},
plugins: [
new UglifyPlugin(),
// uglifyjs-webpack-plugin JS
// webpack ， JS
// --mode production ， webpack mode
],
}
基本解析:
注意:loaderとpluginsは別々にインストールする必要があります.devDependenciesにインストールする必要があります.これらのプラグインはコードを構築するときに役立つからです.
二、常用plugins
1,UglifyPlugin
これはjsコード圧縮に使用されます
yarn add uglifyjs-webpack-plugin --dev
2,html-webpack-plugin
このユーザーは、パッケージされたjsファイルをindex.htmlデフォルトエントリファイルがルートディレクトリのindex.htmlエクスポートファイルデフォルトdistディレクトリのindex.tmlに動的に挿入します.
yarn add uglifyjs-webpack-plugin --dev
自分で定義できる
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //
template: 'assets/index.html', //
}),
],
}
⚠️なぜこのプラグインが必要ですか?なぜ動的に挿入するのですか?主に,ブラウザキャッシュを防止するためにパッケージ化を行うため,パッケージ化されたファイルに[hash]を追加する必要があることが多いためである.動的に挿入する必要があります
3,extract-text-webpack-plugin@next
css-loader&style-loaderだけでコードを変換すると、cssはjsコードをhtmlに動的に挿入するようにプログラミングします.cssを単独でファイルにするには、このpluginを使用する必要があります.
4,DefinePlugin
DefinePluginはwebpackに内蔵されたプラグインで、webpack.DefinePluginを使って直接入手できます.
このプラグインは、コンパイル時に構成できるグローバル定数を作成するために使用されます.これらの定数の値は、webpackの構成で指定できます.たとえば、次のようにします.
5,copy-webpack-plugin
開発したすべてのソースコードとリソースファイルをsrc/ディレクトリの下に配置し、構築時にbuild/ディレクトリを生成します.通常、buildのすべてのファイルを直接パブリッシュします.一部のファイルはwebpack処理されていませんが、buildディレクトリにも表示されることを望んでいます.この場合、CopyWebpackPluginを使用して処理できます.
一般開発では、ルートディレクトリの下にstaticディレクトリが直接コピーされます.
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: 'static',
ignore: ['.*']
}
])
yarn add copy-webpack-plugin -D
6,ProvidePlugin
ProvidePluginもwebpackに内蔵されたプラグインで、直接webpack.ProvidePluginを使用して取得できます.
このコンポーネントは、アプリケーションの実行時の変数として一部のモジュールを参照するために使用されます.これにより、毎回requireまたはimportを使用する必要がなくなり、比較的簡単に使用できます.
new webpack.ProvidePlugin({
identifier: 'module',
// ...
})
//
new webpack.ProvidePlugin({
identifier: ['module', 'property'], // module property， import { property } from 'module'
// ...
})
あなたのコードでは、identifierが割り当てられていない変数として扱われると、moduleは自動的にロードされ、identifierという変数、すなわちmoduleが外部に露出している内容です.
ESのdefault exportの場合は、モジュールのdefaultプロパティ:identifier:['module','default']を指定する必要があります.
7,IgnorePlugin
IgnorePluginはProvidePluginと同様にwebpackに内蔵されたプラグインで、直接webpack.IgnorePluginを使用して取得できます.
このプラグインは、特定のモジュールを無視して、webpackが指定したモジュールをパッケージ化しないようにします.例えばmoment.jsを使用して、直接引用した後、大量のi 18 nのコードが入っていて、最後にパッケージされたファイルが比較的大きいことを招きますが、実際のシーンではこれらのi 18 nのコードは必要ありません.この場合、IgnorePluginを使用してこれらのコードファイルを無視することができます.
module.exports = {
// ...
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
}
8,optimize-css-assets-webpack-plugin
cssコード圧縮
const optimizeCss = require('optimize-css-assets-webpack-plugin');
plugins: [
new optimizeCss()
]
yarn add optimize-css-assets-webpack-plugin -D
三、常用loaders
1,babel-loader
このloaderはes 6+コードをes 5からコードに変換することができる.ブラウザはes 6のコード互換性が悪いためですが、es 6の多くの新しい文法は私たちの開発作業に向上しています.だからes 6コードを変換する必要があります.
yarn add babel-loader @babel/core --dev
2,css-loader & style-loader
css-loaderはCSSコードの解析を担当し、主にCSSの依存を処理するため、例えば@importやurl()などの外部ファイルを参照する声明を処理する.style-loaderはcss-loader解析の結果をJSコードに変換し、実行時にstyleラベルを動的に挿入してCSSコードを有効にします.
{
test: /\.css/,
include: [
path.resolve(__dirname, 'src'),
],
use: [
'style-loader',
'css-loader',
],
}
注意:['style-loader','css-loader']ここでの構成は順序がありますが、ルール適用順序は右から左です.つまりcss-loader、style-loader
yarn add css-loader style-loader --dev
segmentfault.com/a/119000001…
3,less-loader
cssプリコンパイラ
module.exports = {
// ...
module: {
rules: [
{
test: /\.less$/,
// ， loader
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader',
],
}),
},
],
},
// ...
}
yarn add less less-loader -D
4,file-loader & url-loader & image-webpack-loader
file-loaderは画像ファイルの処理に使用できます
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
}
yarn add file-loader -D
簡単に言えばurl-loaderはfile-loaderをカプセル化している.url-loaderはfile-loaderに依存しません.url-loaderを使用する場合はurl-loaderをインストールするだけでいいです.url-loaderにはfile-loaderが内蔵されているため、file-loaderをインストールする必要はありません.
上記の説明では、url-loaderの作業には2つの状況があります.
1)ファイルサイズがlimitパラメータより小さい場合、url-loaderはファイルをDataURLに変換します.
2)ファイルサイズがlimitより大きい場合、url-loaderはfile-loaderを呼び出して処理し、パラメータもfile-loaderに直接渡されます.したがってurl-loaderをインストールするだけでいいです.
url-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
yarn add url-loader -D
image-webpack-loaderは画像圧縮に使用できます
{
loader: 'image-webpack-loader',
options: {
mozjpeg: { // jpeg
progressive: true,
quality: 65
},
optipng: { // imagemin-optipng png，enable: false
enabled: false,
},
pngquant: { // imagemin-pngquant png
quality: '65-90',
speed: 4
},
gifsicle: { // gif
interlaced: false,
},
webp: { // webp， jpg png webp
quality: 75
},
}
yarn add image-webpack-loader
5,NamedModulesPlugin(), && HotModuleReplacementPlugin()
ホットモジュール置換関連
plugins:[//...new webpack.NamedModulesPlugin()//HMR起動時にモジュールの相対パスを表示できるnew webpack.HotModuleReplacementPlugin()//Hot Module Replacementのプラグイン],
四、ローカルサーバwebpack-dev-server&webpack-dev-middleware
1,webpack-dev-server使用
scriptの追加
"start": "webpack-dev-server --mode development"
New webpack.NamedModulesPlugin()//HMR起動時にモジュールの相対パスを表示できるnew webpack.HotModuleReplacementPlugin()//Hot Module Replacementのプラグイン
Webpack-dev-server詳細構成を表示https://webpack.docschina.org/configuration/dev-server/
yarn add webpack-dev-server -D
2,webpack-dev-middleware使用
Webpack-dev-middlewareを使用して静的サーバを起動することもできます.まず、Webpack-dev-middleware依存性をインストールします.
npm install webpack-dev-middleware --save-dev
次に、app.jsなどのNode.jsサービスのスクリプトファイルを作成します.
const webpack = require('webpack')
const middleware = require('webpack-dev-middleware')
const webpackOptions = require('./webpack.config.js') // webpack
プロファイルのパス
//ローカル開発環境デフォルトではdevelopment modeを使用
webpackOptions.mode = 'development'
const compiler = webpack(webpackOptions)
const express = require('express')
const app = express()
app.use(middleware(compiler, {
// webpack-dev-middleware
}))
// Web
// app.use(...)
app.listen(3000, () => console.log('Example app listening on port 3000!'))
scriptの追加
"start": "node app.js"
五、分割の構成
Webpack.base.js:基本部分、すなわち複数のファイルで共有される構成Webpack.development.js:開発環境で使用される構成Webpack.production.js:本番環境で使用される構成です.そのため、複数の構成オブジェクトを比較的スマートに統合できるツールがあれば、簡単にWebpack構成を分割し、環境変数を判断することができます.ツールを使用して、対応する環境の複数の構成オブジェクトを統合してwebpackに提供します.このツールがwebpack-mergeです.
転載先:https://juejin.im/post/5cc5cdcef265da03775c5ade