入力エントリーの開始点。
entry: './src/index.js' //プロジェクトのエントリーファイルに置き換える
2、出力
var {resolve} = require('path');
module.exports = { output:{ filename: 'bundle.js', //出力ファイル名
//_dirname nodejs変数、現在のファイル・ディレクトリへの絶対パス。
path: resolve(_dirname, 'build') //出力パス
}}
3.スタイルのリソース処理。
コンパイル
less-loader: less ファイルを css 構文に変換します；
css-loader：cssファイルをjs構文に変換し、jsファイルに挿入します；
style-loader：head内にstyleタグを作成し、上記のjsの例のcssをstyleタグに入れます。
webpack.config.js
module.exports = { entry: path.resolve(__dirname, './src/js/index.js'), output: { filename: "bundle.js", path: path.resolve(__dirname, "build") }, module: { rules: [ { //どのファイルがテストされるかを一致させる: /\.less$/, //ノードに代わって無視するファイルを除外する_modules除外する: /node_modules/, //どのローダーを処理に使用するかは、配列の実行順序を使用する：右から左へ、下から上へ使用する: [ //styleタグを作成し、jsからcssリソースをheadタグに挿入する 'style-loader', //cssファイルをcommonjsモジュールに変換してjsに読み込み、コンテンツはスタイル文字列になる 'css-loader', //lessファイルをcssファイルにコンパイルする 'less-loader'] }, { //どのファイルがテストされるかを一致させる: /\.css$/, //ノードに代わって無視するファイルを除外する_modules除外する: /node_modules/, //どのローダーを処理に使用するかは、配列の実行順序を使用する：右から左へ、下から上へ使用する: [ //styleタグを作成し、jsからcssリソースをheadタグ'style-loader'に挿入し、 //cssファイルをcommonjsモジュールに変換してjsに読み込み、コンテンツはスタイル文字列'css-loader'になる。] } ] }, postcss: [ require('autoprefixer') //autoprefixerプラグインを呼び出す（例：display: flex ], mode: 'development'}
引き出す
mini-css-extract-plugincss を別の css ファイルに展開するには、** ** を使用することもできます。
var path = require('path')var webpack = require('webpack')var MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { entry: path.resolve(__dirname, './src/js/index.js'), output: { filename: "bundle.js", path: path.resolve(__dirname, "build") }, module: { rules: [ { // どのファイルがテストされるかを一致させる: /\.css$/, //ノードに代わって無視するファイルを除外する_modules除外する: /node_modules/, //どのローダーを処理に使用するかは、配列の実行順序を使用する：右から左へ、下から上へ使用する: [ //'style-loader':スタイルタグを作成し、js内のcssリソースをheadタグに挿入する //このローダーはstyle-loaderを置き換える、役割：js内のcssを別ファイルに抽出する MiniCssExtractPlugin.loader, //cssファイルをjsにロードされたcommonjsモジュールに、コンテンツをスタイル文字列'css-loader'に変換する。] }] }, plugins: [ new MiniCssExtractPlugin({ filename: 'build.css' //統合されたcssファイルの名前を変更する。}) ]}
css 互換性ハンドリング: postcss ---->.postcss-loader postcss-preset-env
1. webpack.config.js
module: { rules: [ { test: /\.css$/, exclude: /node_modules/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { //css互換性のあるpostcssの処理 ---。>postcss-loader postcss-preset-env //postcssがパッケージを見つけるのを助ける.jsonファイルにブラウザリストを設定する,
//コンフィギュレーション・ローダーを通して、指定されたcss互換スタイルを読み込む: 'postcss-loader', options: { ident: 'postcss', plugins: ()=>{ require('postcss-preset-env')() } } } ] }] },
2.package.jsonにbrowserslistを追加します。
"browserslist": {
"development": [ //開発環境では、node環境変数を設定して変更することができる: process.env.NODE_ENV = "development" "last 1 chrome version", //クロームの最新バージョン「last 1 firefix version」に対応する。, "last 1 safari version" ],
//本番環境、デフォルトは本番環境、ノード環境変数を設定して変更することができる: プロセス.env.NODE_ENV = "production"
"production": [ ">0.2%", //98と互換性がある%no dead", //ブラウザが死んでいても問題ない "no open_mini all" //開いている_miniブラウザーの種類] }
js構文チェック：eslint， ``eslint-loader
webpack.config.js
module: { rules: [ { /** * 構文チェック：ノードではなく、カスタムのソースコードだけをチェックする。_modulesサードパーティ・コード* チェック・ルールを設定する：* package.jsonhtml-loader**にeslintConfigを設定する。
* "eslintConfig":{ * "extends": "airbnb-base" * } * ここではairbnbルールを使用する。eslint-config-airbnb-baseをダウンロードする。* * */ test: /\.js$/, exclude: /node_modules/, use: 'eslint-loader', options:{ fix:true //eslintエラーを自動的に修正する} } ] },
js互換性処理: babel-loader
基本的なjsの互換性処理: @babel/preset-env
module: { rules: [ { /** * js互換性* 1\. 基本的なjs互換性処理：@babel/preset-env */ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader', options:{ //preset：ただ、どのような互換性処理をバベルはpresetする: ['@babel/preset-env'] } }] },
すべてのjs互換処理：@babel/polyfill
import '@babel/polyfill'すべての互換性コードを導入するためにjsファイルで使用すると、コードのサイズが大きくなるのでお勧めしません。
オンデマンドjs互換性処理: core-js
module: { rules: [ { /** * js互換性* 1\. 基本的なjs互換性処理：@babel/preset-env， 変換できるのは基本構文のみで、es6構文は変換できない。* 2\. すべてのjs互換処理：@babel/polyfill ,jsファイルの中で、import '@babel/polyfill' * しかし、すべての互換性コードを導入することになり、パッケージ化されたコードのサイズが大きくなりすぎる。* 3\. オンデマンドでjsの互換性処理を行う：core-js*/ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader', options:{ //preset：ただ、どのような互換性処理をバベルはpresetする: [ '@babel/preset-env', { useBuiltIns: 'usage', //オンデマンドでcorejsをロードする: { //corejsバージョンバージョンを指定する: 3 }, //互換性ターゲットのために使用するブラウザのバージョンを指定する: { chrome: '60', firefox: '50' //... } } ] } }] },
圧縮js
mode:'production'
// 本番環境では自動的にjsコードが圧縮される
htmlリソースの処理: html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
modules.export = {
plugins: [ // html テンプレートプラグインは、バンドル、cssファイルを自動的に新しいhtmlファイル newに導入されるパッケージ化される HtmlWebpackPlugin ({ template: __dirname + './src/index.html', minify:{ //htmlファイルを圧縮する collapseWhitespace: true, //スペースを削除する removeComments: true //コメントを削除する} }) ],
}
イメージリソースの処理: url-loader
url-loaderはデフォルトでes6 modular parsingを使用しますが、html-loaderはcommon.jsとしてイメージを導入するため、同時に使用するとエラーになるので、url-loaderのオプションでesModul:``falseを設定してください。
module: { rules: [ { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader', options: { /** * イメージのサイズが8kb未満の場合、base64で処理される、つまりイメージはbase64文字列に変換される。* 利点：リクエスト数を減らせる* 欠点：イメージのサイズが大きくなる* */ limit: 8*1024,
esModule: false, //url-loaderのes6モジュラーパースを無効にし、commonjsを使用してパースする。
name: '[hash:10].[ext]' //イメージの名前を変更する場合、イメージハッシュ値の最初の10桁を取り、extはイメージファイルの元の拡張子を表す。} } ] },
background:url('img.jpg')は扱えますが、htmlのimgイメージリソースは扱えません。
処理には **html-loader** を使用してください：
module:{
rules: [
{ test:/\.html$/, //htmlファイルローダーでimgイメージを処理する: 'html-loader' }
]
}
、その他のリソースのパッケージ化：ファイルローダー
module:{
rules: [
{ exclude: /\.(css|js|html|less)$/, loader: 'file-loader', option: { name: '[hash:10].[ext]' } }
]
}
