[webpack 4]構成は独自のパッケージシステムチュートリアル(最終編)——環境構成編

10276 ワード

webpack入門 webpack 4

GitHubフルプロファイルアドレス:https://github.com/yhtx1997/w...
ページが長すぎて3回にわたって公開されるため、[webpack 4]構成が自分のパッケージシステムに属するチュートリアル(一)--基礎構成編[webpack 4]構成が自分のパッケージシステムに属するチュートリアル(二)--資源構成編[webpack 4]構成が自分のパッケージシステムに属するチュートリアル(最終編)--環境構成編を順番に見ることをお勧めします.
環境設定編
主な内容

開発環境生産環境分離

リアルタイムプレビュー

webpack-dev-serverその他の一般的な

コード多重処理

開発環境と生産環境
ここまで来たら、開発環境モデルと生産環境モデルについて話すべきだ.

開発環境は自己開発時に使用するもので、リアルタイムコンパイル機能、モジュールホットスワップ機能(更新ファイルはページを完全に更新する必要はない)、エラーメッセージは具体的にどのファイルが何行

であるかを提示する必要がある.

の生産環境はオンラインでユーザーに使用するものであり、コード圧縮機能

が必要である.
コードコンポーネントの構成
私たちはまず前に配置したwebpackプロファイルを名前を変えて、webpackと名前を変えます.common.jsは、開発環境も生産環境も必要であることを意味し、コード圧縮などを生産構成に移してwebpack-mergeをインストールし、公式には環境ごとに個別のwebpackファイルを書くことを推奨している.
簡単な方法で実現できますが、個別のプロファイルを書くことをお勧めします.このような構成では、自分が何をしているのかをより明確にすることができ、構成をより個性的にすることができます(カスタマイズ)
Webpack-mergeのインストール

npm install webpack-merge -D

新規開発環境構成
Webpackという名前のjsファイルを新規作成しました.dev.js、次のコードを追加

const merge = require('webpack-merge');//    
const common = require('./webpack.common.js');//      

 module.exports = merge(common, {
    mode: 'development',//       
     //   dev    
 })

新規開発環境構成
Webpackという名前のjsファイルを新規作成しました.prod.js
次のコードを追加

const merge = require('webpack-merge');//    
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');//     js   
const common = require('./webpack.common.js');//      

module.exports = merge(common, {
    mode: 'production',//       
    //   prod    
});

開発環境
リアルタイムプレビュー
設定して操作するパートナーは、変更するたびにコマンドラインに手動でコマンドを入力し、ブラウザをリフレッシュして最新の効果を見る必要があることを発見した可能性があります.
では、この2つの問題を解決するには、webpack-dev-serverを使用します.
インストール

npm install webpack-dev-server -D

コンフィギュレーション

リアルタイムプレビュー

カスタムリクエストエージェント

カスタムipおよびポート

注:webpack-dev-serverを使用すると、ローカルファイルにコンパイルされるのではなく、メモリに

が格納されます.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const webpack = require('webpack');

 module.exports = merge(common, {
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),//     ，          
        hot: true,//     
        host: 'localhost',//          127.0.0.1     
        port: 8080,
        proxy: {
            '/api': 'http://localhost:3000'//    /api/users           http://localhost:3000/api/users
        }

    }
 })

次にエラーメッセージを追加し、HTMLを生成するコードを共通構成(webpack.common.js)からここに取得します.
開発と生産が少し違うので、どのように簡単に配置するか分からないので、開発環境と生産環境はHTMLを生成するコードを置きます.
せいさんかんきょう

パッケージングのたびに古いファイル

をクリーンアップします.

すべてのコードを圧縮する

重複jsコードは、1つだけ必要です

ファイルのクリーンアップ
パブリックプロファイル(webpack.common.js)から、前にファイルをクリーンアップしたコードをここに持ってきてください.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: '2048',
            template: './src/index.html',
            minify: true,//HTML     
            hash: true
        }),
    ],
})

コード圧縮
圧縮コードのプラグインを先にインストール

npm install uglifyjs-webpack-plugin -D 
npm install optimize-css-assets-webpack-plugin -D

uglifyjs-webpack-pluginはjs圧縮プラグイン

である

optimize-css-assets-webpack-pluginが推奨と

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

多重コード分離
jQueryを使用して開発を支援する必要があると仮定し、a.js b.jsの2つのファイルにjQueryを導入し、a.js b.jsをa.min.js b.min.jsにパッケージ化しました.このとき、彼らの体積は元よりずっと大きくなり、aとbのコードには完全なjQueryコードが含まれています.
このような状況を解決するために、jQueryという多重化されたコードを個別のファイルに分離する必要があります.
環境を本番環境に設定すると、多くの機能がデフォルトでオンになります.SplitChunksPluginは重複依存を回避するために使用されます.
デフォルトの構成は、構成しない場合には次のとおりです.

 optimization: {
    splitChunks: {
      chunks: 'async', 
      minSize: 30000,
      minChunks: 1,
    }
  }

chunks:どのコードが最適化される必要があるかを示す3つのオプション値:initial(初期ブロック)、async(必要に応じてブロックをロード)、all(すべてのブロック)、デフォルトはasyncからallに変更してすべての

をサポートする

minSize:このファイルは少なくともどのくらい最適化されますか.デフォルトでは30000です.実際のテストはファイルが30 kbより大きいので、31 kbで

の最適化が開始されます.

minChunks:最低数回参照して最適化します.デフォルトは1です.実際のテストでは、1回のみ参照する場合は最適化されません.

は、それより大きい場合にのみ最適化されます.

注:他の属性は個人的によく使われていないと思って書いていないので、もっと詳しくはここ

を見ることができます.
最終コード要約
最終的な共通構成webpack.common.jsコードは以下の通りです.

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        512:'./src/js/512.js',
        1024:'./src/js/1024.js',
        2048:'./src/js/2048.js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ],
    output: {
        filename: "js/[name].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              },
              {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    },

}

最終開発環境webpack.dev.jsコードは次のとおりです.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = merge(common, {
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            title: '2048',
            template: './src/index.html',
            minify: false,
            hash: true
        })
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': 'http://localhost:3000'
        }

    }
 })

最終生産環境webpack.prod.jsコードは次のとおりです.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: '2048',
            template: './src/index.html',
            minify: true,
            hash: true
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true 
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
    }
});

npmプロジェクト構成コードpackage.jsonコードは以下の通りです

{
  "name": "2048",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.28.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "autoprefixer": "^9.4.3",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.1.0",
    "csv-loader": "^3.0.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "^7.0.7",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.5",
    "xml-loader": "^1.2.1"
  }
}

python-マルチディスク-コヒーレントyield from yield from/asyncio非同期io/コヒーレントの最も簡単な例を徹底的に詳しく説明する

君莫笑【2017-06-14】