Webpack 忽略 webpack.config.js

Question

我正在关注 this tutorial 因为我是 Webpack 的新手...我的 webpack.config.js 是：

module.exports = {
    entry: "./app/entry",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};

还有我的 package.json:

{
  "name": "pruebaWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  }
}

但显然它忽略了我的配置文件，因为当我运行 npm run build 它使用默认路径（entry = ./src y output = ./dist）并且不识别模式属性:

pruebaWebpack@1.0.0 build /opt/lampp/htdocs/pruebaWebpack

webpack

Hash: 4a9c3de0f194dd38ac70 Version: webpack 4.4.1

Time: 234ms

Built at: 2018-4-1 15:53:00 Asset Size Chunks
Chunk

Names main.js 564 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 19 bytes {0} [built]

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

提前致谢，抱歉我的英语不好。

Answer 1

webpack.config.js。尝试类似的东西：

const WEBPACK = require('webpack');
const PATH = require('path');

module.exports = {
resolve: {
    extensions: ['.js', '.jsx']
},
context: __dirname,
entry: {
    app: ['./src/index.jsx'] // app: ['./MY_FOLDER_INPUT/MY_FILE_INDEX.jsx']
},
output = {
    path: PATH.join(__dirname, '/MY_FOLDER_OUTPUT'),
    filename: 'index.js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }
    ]
}
};

package.json。添加下一个 scripts:

"scripts": 
{ 
    "build": "webpack-dev-server --mode development --open", 
    "prod_build": "webpack --mode production" 
}

它应该有效

Answer 2

您在问题中分享的配置摘录似乎是正确的。因此，这个问题甚至可能是错字。如果您想共享项目代码以重现问题，我可以提供更多帮助。

以工作配置文件为起点，在 GitHub 上回顾我的 Webpack Demo。

详细了解 configuring Webpack。

Answer 3

我上周遇到了同样的问题，我注意到文件名的开头有一个空白字符 (" webpack.config.js") 是不可见的在 VS 代码中。大概是我做题的时候真正的问题吧

希望对你有帮助

Answer 4

对我来说，在配置文件中输入 module.export 而不是 module.exports 是个愚蠢的错误。

Webpack 忽略 webpack.config.js

Webpack ignores webpack.config.js

webpack-4