CH02 NPM Install 指令疑問

[Wizardgreen]

您好，先感謝您為大眾翻譯此系列教學文，我在讀的過程中發現一個小小的問題。
在 CH02 中，教學透過 NPM 來安裝 Webpack 許多相關的套件，其中有提到 Webpack-loader，
但我看下方指令的部分似乎沒有輸入到 Webpack-loader ， 想請問指令中跳過 loader 的原因。

教學文內指令如下：
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server

[Wizardgreen]

接著我做到 npm run dev 的階段，終端機跳出警告說還需要安裝 webpack-cli ，不知道是不是哪邊版本不同才導致的問題，但在安裝 cli 之後，問題似乎更嚴重了。
`✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid:
  object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
  -> Options affecting the normal modules (NormalModuleFactory).
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! reactpractice@1.0.0 dev: webpack-dev-server --devtool eval --progress --colors --content-base build
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the reactpractice@1.0.0 dev script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  `

[janniin]

嗨，您好。

我猜想會不會是因為 webpack 版本更新所造成的問題

前幾日在嘗試運作範例時也碰到一些問題，回憶我當時除了安裝 webpack-cli 之外還將 webpack.config.js 的檔案做了些修改，下面是我修改後的檔案內容：

// 這邊使用 HtmlWebpackPlugin，將 bundle 好的 <script> 插入到 body。${__dirname} 為 ES6 語法對應到 __dirname  
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: `${__dirname}/app/index.html`,
  filename: 'index.html',
  inject: 'body',
});

module.exports = {
  // 檔案起始點從 entry 進入，因為是陣列所以也可以是多個檔案
  entry: [
    './app/index.js',
  ],
  // output 是放入產生出來的結果的相關參數
  output: {
    path: `${__dirname}/dist`,
    filename: 'index_bundle.js',
  },
  module: {
      // loaders 則是放欲使用的 loaders，在這邊是使用 babel-loader 將所有 .js（這邊用到正則式）相關檔案
      // （排除了 npm 安裝的套件位置 node_modules）轉譯成瀏覽器可以閱讀的 JavaScript。preset 則是使用的 babel 轉譯規則，這邊使用 react、es2015。
      // 若是已經單獨使用 .babelrc 作為 presets 設定的話，則可以省略 query

      // webpack 版本更新導致schema結構改變: https://webpack.js.org/guides/migrating/#module-preloaders-and-module-postloaders-were-removed-
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: "pre",
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  // devServer 則是 webpack-dev-server 設定
  devServer: {
    inline: true,
    port: 8008,
  },
  // plugins 放置所使用的外掛
  plugins: [HTMLWebpackPluginConfig],
};

相關的資訊可以在這裡找到

希望有幫助到您

[Wizardgreen]

確實幫助到我了，感謝你細心觀察發現這個問題!