webpack 4シリーズ教程(16):開発モードと生産モード・実戦

8293 ワード

web 工程化 webpack javascript

これはですwebpack4シリーズの最後の教程です.この文章は前のすべての教程をもとにして、本当の意味でwebpackプロジェクトを作りました.私は三ヶ月をかけてこの教程を整理しました.関連の実例コードを完備しました.webpackの理論と応用ももっと熟知しています.もちろん、皆さんの支持にも感謝しています.はい、感慨が終わりました.本題を始めます.

原文の住所:https://godbmw.com/passage/75

私の小さい駅:godbmw.com

0.授業紹介と資料

>>本節課のソースコード

>>すべての課程のソースコード

今回の授業のコードリストは以下の通りです.
1.開発環境と生産環境をどう分離するか?
VuejsまたはReactJsの足場をよく知っている友達はすべて知っているはずです.ルートディレクトリの下に/build/フォルダがあります.専用にwebpack配置ファイルの関連コードを置いています.
前の15時間の授業のデモと違って、開発環境と生産環境を分離するために、それぞれ対応するwebpack.config.js配置コードを作成する必要があります.
間違いなく、いくつかのプラグインと配置は2つの環境を共有しているので、重複した労働を避けるために、精製すべきです.上記のディレクトリのスクリーンショットのように、webpackは、両方の環境に共通のプロファイルを保存しています.build/webpack.common.conf.jsおよびbuild/webpack.dev.conf.jsは、それぞれ開発と生産環境に必要な特殊な構成である.
2.作成build/webpack.prod.conf.js前のセクションと同様に、コマンドをより良く起動するためには、構成package.jsonオプションが必要である.scriptsのコマンドフォーマットを模倣して、以下のように作成されている.

{
  "scripts": {
    "dev": "webpack-dev-server --env development --open --config build/webpack.common.conf.js",
    "build": "webpack --env production --config build/webpack.common.conf.js"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0"
  }
}

設定に従って、実行:

vue-cli:開発デバッグモードに入る

package.json:パッケージファイルを生成する

npm run devは、2つの環境の共通コードを格納しているだけでなく、npm run buildコマンドの入口ファイルであることも分かる.
3.webpackの異なる構成をどのように統合しますか?
前に述べたように、私たちは3つのプロファイルを持っています.では、build/webpack.common.conf.jsに開発または生産環境の構成を導入し、正確に統合するにはどうすればいいですか?
このときは、webpackという第三者ライブラリを借りる必要があります.以下は例示的なコードです.

const merge = require("webpack-merge");

const productionConfig = require("./webpack.prod.conf");
const developmentConfig = require("./webpack.dev.conf");

const commonConfig = {}; // ...   

module.exports = env => {
  let config = env === "production" ? productionConfig : developmentConfig;
  return merge(commonConfig, config); //               
};

4.コードの中で環境を区分するにはどうすればいいですか?
4.1プロファイル
このjsファイルがwebpackコマンドの入口ファイルである場合、build/webpack.common.conf.jsの値はwebpack-mergeの最初のパラメータに自動的に入力され、開発者が直接使用することができる.
下のコードのように、まず環境を判断して、どのような配置を使うかを決めて、最後にreturnはwebpackに与えます.

module.exports = env => {
  let config = env === "production" ? productionConfig : developmentConfig;
  return merge(commonConfig, config); //               
};

4.2プロジェクトファイル
このjsファイルがプロジェクトのスクリプトファイルである場合、build/webpack.common.conf.jsにアクセスして環境を判断することができます.

if (process.env.NODE_ENV === "development") {
  console.log("    ");
} else {
  console.log("    ");
}

5.プロファイルの作成
5.1パブリックプロファイルの作成

// /build/webpack.common.conf.js

const webpack = require("webpack");
const merge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

const productionConfig = require("./webpack.prod.conf.js"); //           
const developmentConfig = require("./webpack.dev.conf.js"); //           

/**
 *        ，       
 * @param {String} env "development" or "production"
 */
const generateConfig = env => {
  //     Loader Plugin    

  let scriptLoader = [
    {
      loader: "babel-loader"
    }
  ];

  let cssLoader = [
    {
      loader: "css-loader",
      options: {
        minimize: true,
        sourceMap: env === "development" ? true : false //     ：  source-map
      }
    }
  ];

  let styleLoader =
    env === "production"
      ? ExtractTextPlugin.extract({
          //     ：  、      
          fallback: {
            loader: "style-loader"
          },
          use: cssLoader
        })
      : //     ：      
        cssLoader;

  return {
    entry: { app: "./src/app.js" },
    output: {
      publicPath: env === "development" ? "/" : __dirname + "/../dist/",
      path: path.resolve(__dirname, "..", "dist"),
      filename: "[name]-[hash:5].bundle.js",
      chunkFilename: "[name]-[hash:5].chunk.js"
    },
    module: {
      rules: [
        { test: /\.js$/, exclude: /(node_modules)/, use: scriptLoader },
        { test: /\.css$/, use: styleLoader }
      ]
    },
    plugins: [
      //                  
      new HtmlWebpackPlugin({
        filename: "index.html",
        template: path.resolve(__dirname, "..", "index.html"),
        chunks: ["app"],
        minify: {
          collapseWhitespace: true
        }
      }),
      new webpack.ProvidePlugin({ $: "jquery" })
    ]
  };
};

module.exports = env => {
  let config = env === "production" ? productionConfig : developmentConfig;
  return merge(generateConfig(env), config);
};

5.2開発環境プロファイルの作成

// /build/webpack.dev.conf.js

const webpack = require("webpack");

const path = require("path");

module.exports = {
  mode: "development",
  devtool: "source-map",
  devServer: {
    contentBase: path.join(__dirname, "../dist/"),
    port: 8000,
    hot: true,
    overlay: true,
    proxy: {
      "/comments": {
        target: "https://m.weibo.cn",
        changeOrigin: true,
        logLevel: "debug",
        headers: {
          Cookie: ""
        }
      }
    },
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
};

5.3生産環境配置ファイルを作成する

// /build/webpack.comm.conf.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const path = require("path");

module.exports = {
  mode: "production",
  plugins: [
    new ExtractTextPlugin({
      filename: "[name].min.css",
      allChunks: false //       css,         CSS
    }),
    new CleanWebpackPlugin(["dist"], {
      root: path.resolve(__dirname, "../"),
      verbose: true
    })
  ]
};

6.その他のファイル
プロジェクトディレクトリのスクリーンショットに展示されている様式のファイルは、ベンダdorの下のファイルとap.jsがあります.コードは一つ一つ並べられていません.必要に応じて、簡単なコードを書いて、実行してもいいです.前の配置ファイルの構造と説明が一番重要です.
ここはソースの住所だけを提供します.

エントランスファイルmode:https://github.com/dongyuanxin/webpack-demos/blob/master/demo16/src/app.js

module.exportsにおけるすべてのスタイルファイル:https://github.com/dongyuanxin/webpack-demos/tree/master/demo16/src/style

process.env.NODE_ENVにおけるすべてのスクリプトファイル:https://github.com/dongyuanxin/webpack-demos/tree/master/demo16/src/vendor

7.運転効果とテスト
こんなに長い間いじっていたら、必ずテストしなければなりません.どうすれば正確さが分かりますか?
7.1走る:開発モード
プロジェクトディレクトリに入り、/src/app.jsを実行します.
成功して走りました.間違いはありませんでした.
ブラウザのコントロールを開けてみます.
はい、全部作成された/src/style/の論理で出力されます.
7.2走る:生産モード/src/vendor/で開発モードを終了したら、npm run devを実行し、下図のように梱包に成功しました.
包装したファイルも指定の場所に置いてあります.
直接app.jsをクリックして、ブラウザコンソールを開きます.
ok、Ctrl+Cの出力に適合しています.開発環境かどうか確認できました.
8.最終的に
完结撒花✿ヽ(°)ノ✿

AnglarJS限定$scopeの範囲例詳細