CH02 NPM Install 指令疑問

3
closed
Wizardgreen
Wizardgreen
Posted 3 years ago

CH02 NPM Install 指令疑問 #94

您好,先感謝您為大眾翻譯此系列教學文,我在讀的過程中發現一個小小的問題。
在 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
Wizardgreen
Created 3 years ago

接著我做到 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! [email protected] dev: webpack-dev-server --devtool eval --progress --colors --content-base build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. `
janniin
janniin
Created 3 years ago

嗨,您好。

我猜想會不會是因為 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
Wizardgreen
Created 3 years ago

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