web-dev-qa-db-fra.com

Webpack 4 configurant les points d'entrée et les sorties (dossier dist généré dans chaque dossier de projet)

Le cas est d'avoir le dossier principal 'Projects' et d'y installer tous les fichiers webpack 4 avec configs. Dans le dossier "Projets" se trouvent de nombreux dossiers tels que 'Project1', 'Project2', etc...Je veux commencer à partir du point d'entrée 'node_modules' où webpack.config.js est défini et personnaliser d'autres points d'entrée tels que ./Project1/js/app.jsx, des sorties telles que ./Project1/dist/js/main.js, comme avec scss et index.html, toutes générées dans le dossier 'dist'. Le problème est d’avoir toujours une seule fois installé node_modules dans le dossier 'Projects'.

le package.json: 

{
  "name": "webpack4_example",
  "version": "1.0.0",
  "main": "index.js",
  "browserslist": ["last 2 versions"],
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --watch --mode development",
    "start": "webpack-dev-server --open --mode development"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js: 

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './Project1/js/app.jsx',                // customized entry point
  output: { 
    path: path.resolve(__dirname, 'dist'),  
    filename: './js/out.js'                     // generated ./Project1/dist/js/out.js
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: 'html-loader',
            options: { minimize: true } 
          }
        ]
      },
      {
        test: /\.(png|jpe?g)/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: './img/[name].[ext]',
              limit: 10000
            }
          },
          {
            loader: 'img-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './Project1/index.html',     // not sure how to set these sections
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

.babelrc: 

{
  "presets": ["env", "react", "stage-2"]
}

D'après ce que je comprends sans points d'entrée personnalisés, Webpack par défaut recherchera 'Projects/src/...' pour tous les fichiers tels que scss, js, img, index.html, index.js, et générera le dossier 'Projects/dist' avec tous les fichiers générés.

Le formulaire de configuration ci-dessus compile sans erreur mais ne génère pas le dossier 'dist', je ne suis donc pas sûr que le processus de compilation se déroule correctement.

J'apprécierais vos suggestions et solutions

javascriptnode.jsconfigurationwebpack-4webpack.config.js
5
PawełG

SOLUTION (mise à jour: ajout de fichiers de travail): Ok, j'ai réussi à le faire fonctionner (le point de départ est l'emplacement où node_modules et d'autres fichiers de configuration webpack4 sont installés, ici dans le dossier principal Projects)

Projects
   |__Project1
   |         |__js
   |         |   |__app.jsx
   |         |__dist       //desirable result, generated dist folder
   |         |     |__*     //all generated folders/files html, js, css, img
   |         |__index.ejs  //renamed from index.html
   |
   |__Project2  //etc, project folders
   |
   |__src // if without customized entry points it's default source
   |    |__folders like /_scss, /img, /js
   |    |__index.js
   |    |__index.ejs   //renamed index.html, used when no customized
   |                   //entry points are set, same as for all /src
   |
   |__node_modules
   |__.babelrc
   |__package.json
   |__webpack.config.js

.babelrc inchangé et comme ci-dessus au post précédent

dans cet exemple, le dossier Projects est normalement créé le dossier src avec tous les fichiers/dossiers à transmettre via Webpack4, dans /src/index.js le fichier doit être présent, il permet d'importer d'autres fichiers.

exemple de index.js

import style from "./_scss/main.scss";    //paths for Projects/src/...
import style from "./main.css";

package.json 

{
  "name": "webpack4_example",
  "version": "1.0.0",
  "main": "index.js",            // the file explained just above
  "browserslist": ["last 2 versions"],
  "scripts": {
    "dev": "webpack --mode development ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
    "build": "webpack --mode production ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
    "watch": "webpack --watch --mode development",
    "start": "webpack-dev-server --mode development --open --watch-content-base ./Project1/js/app.jsx"  //watching desired files changes live in browser
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

où --mode production | developement | none correspond aux optimisations de formatage des fichiers de sortie du dossier dist ou à aucune de ces optimisations, pour une meilleure lisibilité, utilisez none

webpack.config.js 

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js$|jsx$)/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: 'html-loader',
            options: { minimize: true } 
          }
        ]
      },
      {
        test: /\.(png|jpe?g)/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: './img/[name].[ext]',
              limit: 10000
            }
          },
          {
            loader: 'img-loader'
          }
        ]
      },
      {
        test: /\.(css$|scss$)/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './Project1/index.ejs',     // entry point for html
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  watchOptions: {                   //added to make possible watch files
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
};

le point d'entrée personnalisé pour index.html où .html extension a été remplacé par .ejs, ce qui permet de résoudre certains problèmes causés entre html-loader et html-webpack-plugin. Avec .ejs, la sortie HTML, également placée automatiquement dans le dossier dist, n’est pas optimisée pour le formatage et est lisible. Vérifiez si html.ejs contient une balise avec le chemin épinglé du fichier [out] .js (ici celle générée dans le dossier dist). Le fichier index.html généré dans le dossier dist ajoutera une autre ligne de ce type et sera donc doublé -> ligne à supprimer.

pour une utilisation en exécution: npm run build , npm start

1
PawełG