web-dev-qa-db-fra.com

Webpack ignore webpack.config.js

Je suis ce tutoriel parce que je suis nouveau dans Webpack ... Mon webpack.config.js est:

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

Et mon 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"
  }
}

Mais apparemment, c'est ignorer mon fichier de configuration parce que quand j'exécute npm run build, il utilise les chemins par défaut (entry = ./src y output = ./dist) et ne reconnaît pas l'attribut mode:

[email protected] construire/opt/lampp/htdocs/pruebaWebpack

webpack

Hash: 4a9c3de0f194dd38ac70 Version: webpack 4.4.1 

Temps: 234ms 

Année de construction: 2018-4-1 15:53:00 Taille de l'actif
Tronçon

Nommer main.js 564 octets 0 [émis] main Entry principale main = main.js [0] ./src/index.js 19 octets {0} [construit]

AVERTISSEMENT dans la configuration L'option 'mode' n'a pas été définie, webpack retombera sur la «production» pour cette valeur. Définissez l'option 'mode' sur 'développement' ou 'production' permettant d'activer les valeurs par défaut pour chaque environnement . Vous pouvez également le définir sur «aucun» pour désactiver tout comportement par défaut. Apprendre plus: https://webpack.js.org/concepts/mode/

Merci d'avance et désolé pour mon anglais.

webpack-4
3
Genarito

L'extrait de configuration partagé dans votre question semble correct… .. Par conséquent, le problème pourrait même être une faute de frappe… .. Si vous souhaitez partager le code du projet pour reproduire le problème, je pourrais vous aider davantage.

Passez en revue ma Webpack Demo sur GitHub avec les fichiers de configuration utilisés comme point de départ.

En savoir plus sur la configuration Webpack.

7
Carloluis

webpack.config.js. Essayez quelque chose comme: 

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. Ajouter le prochain scripts:

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

Ça devrait marcher

5
JuMoGar

J'ai eu le même problème la semaine dernière et j'ai remarqué qu'il y avait un caractère d'espacement au début du nom de fichier ( "webpack.config.js" ) qui n'est pas visible dans le code VS C'était probablement le vrai problème lorsque j'ai posé la question.

J'espère que ça aide

1
Genarito