Bonsoir,

Je suis la formation webpack et jusqu'à l'instalation de webpack-dev-server tout ce passait bien. En lançant la cmd "cross-env NODE_ENV=dev webpack", mes fichiers étaient bien compilés et créés dans mon dossier "dist" tant en production qu'en développement .

Une fois webpack-dev-server installé et en exécutant la cmd "cross-env NODE_ENV=dev webpack-dev-server --open" la console me dit que mon fichier app.js est bien émit mais en réalité dans mon projet je ne trouve aucun fichier.

Voici ce que me dit la console

npm run start

> project-starter@1.0.0 start D:\Sites\Lab\project-starter
> cross-env NODE_ENV=dev webpack-dev-server --open

Project is running at http://localhost:8080/
webpack output is served from /./dist/
Hash: 5cd5be2a230b5e23db7f
Version: webpack 3.11.0
Time: 2398ms
                    Asset     Size  Chunks                    Chunk Names
      fonts/ardelaney.ttf   177 kB          [emitted]
img/bootstrap.cbe5403.jpg  49.4 kB          [emitted]
         ./app5cd5be2a.js  1.69 MB       0  [emitted]  [big]  app
   [2] multi (webpack)-dev-server/client?http://localhost:8080 ./assets/scss/app.scss ./assets/js/app.js 52 bytes {0} [built]
   [3] (webpack)-dev-server/client?http://localhost:8080 7.91 kB {0} [built]
   [4] ./node_modules/url/url.js 23.3 kB {0} [built]
  [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
  [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./assets/scss/app.scss 1.36 kB {0} [built]
  [26] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib!./assets/scss/app.scss 2.12 kB {0} [built]
  [31] ./node_modules/style-loader/lib/addStyles.js 9.92 kB {0} [built]
  [33] ./assets/js/app.js 183 bytes {0} [built]
  [34] ./assets/js/log.js 77 bytes {0} [built]
  [35] ./node_modules/jquery/dist/jquery.js 272 kB {0} [built]
    + 21 hidden modules
webpack: Compiled successfully.

Et voici mon fichier webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require("webpack");
const path = require("path");
const uglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let isDev = process.env.NODE_ENV === "dev"; //return false or true
let cssDev = ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'];
let cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{loader: 'css-loader', options: {minimize: false}}, 'sass-loader', 'postcss-loader']
});
let devPath = './dist/';
let prodPath = './';

let cssConfig = isDev ? cssDev : cssProd;
let publicPathConfig = isDev ? devPath : prodPath;

let config = {
    entry: {
        app: ['./assets/scss/app.scss', './assets/js/app.js']
    },
    watch: isDev,
    output: {
        path: path.resolve('./dist'),
        filename: "./[name][hash:8].js",
        publicPath: publicPathConfig
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.scss/,
                use: cssConfig
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: 'fonts/[name].[ext]'
                    }
                }]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:7].[ext]'
                        }
                }]
            }
        ]
    },
    devtool: isDev ? "cheap-module-eval-source-map" : false,
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            disable: isDev
        })

    ]
}
if (!isDev){
    config.plugins.push(new uglifyJSPlugin({
        sourceMap: false
    })),
    config.plugins.push(new CleanWebpackPlugin(['dist'], {
        root: path.resolve('./'),
        verbose: true,
        dry: false
    }))
}
module.exports = config;

J'utilise webpack 3.11.0 et webpack-dev-server 2.11.1

Merci d'avance pour votre aide

2 réponses


Salut,
C'est normal. Le webpack-dev-server ne créé pas de fichier, il sert juste à servir tes assets.
Si tu veux voir tes fichiers, il faut passer en mode production. Webpack va créer un bundle des fichiers.

bibi427
Auteur

Ok je comprends maintenant qu'avec webpack-dev-server mes assets sont placés en mémoire du serveur. Toutefois, lorsque je suis sur locahost:8080 ni mon js ni mes css ne sont pris en compte, j'ai juste le code html de mon index.