web-dev-qa-db-fra.com

importer des fichiers CSS et JS à l'aide de Webpack

J'ai une structure de répertoires comme celle-ci:

enter image description here

et à l'intérieur de node_modules:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

J'ai besoin de générer des bundles CSS et JS séparés comme ceci:

custom-styles.css, custom-js.js, style-libs.css, js-libs.js

où style-libs et js-libs devrait contenir des fichiers syles et js de toutes les bibliothèques comme bootstrap et jQuery. Voici ce que j'ai fait jusqu'à présent:

webpack.config.js: 

const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  watch: true,

  // Script to bundle using webpack
  entry: path.join(basedir, 'src', 'Client.js'),
  // Output directory and bundled file
  output: {
    path: path.join(basedir, 'dist'),
    filename: 'app.js'
  },
  // Configure module loaders (for JS ES6, JSX, etc.)
  module: {
    // Babel loader for JS(X) files, presets configured in .babelrc
    loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel',
            babelrc: false,
            query: {
                presets: ["es2015", "stage-0", "react"],
                cacheDirectory: true // TODO: only on development
            }
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
    ]
  },
  // Set plugins (for index.html, optimizations, etc.)
  plugins: [
     // Generate index.html
     new HtmlWebpackPlugin({
        template: path.join(basedir, 'src', 'index.html'),
        filename: 'index.html'
     }),
     new ExtractTextPlugin(stylesPath + "/bootstrap.css", {
        allChunks: true,
     })
  ]
};

Client.js 

import * as p from 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Je suis en mesure d'exécuter l'application et de rendre correctement tous les composants, sauf le chargement du fichier JS et CSS externe à l'aide de webpack.

Je ne suis pas très expérimenté avec webpack et je trouve cela très difficile d'envelopper mon cœur autour de lui. Il y a quelques questions simples:

1- Cette configuration est-elle correcte? Si oui, comment puis-je inclure mes fichiers CSS et JS dans les composants utilisant ES6. Quelque chose comme import mot clé.

2- Dois-je même utiliser le webpack pour les fichiers CSS?

3- Comment spécifier des répertoires individuels pour l'entrée et leurs fichiers de sortie respectifs dans le webpack? Quelque chose comme all-custom.js devrait être affiché pour custom1.js et custom2.js?

Je sais que ce sont des questions très basiques et j'ai essayé Google mais je n'ai pas trouvé un seul tutoriel pour Webpack qui soit simple et cible les débutants.

reactjswebpackwebpack-style-loaderhtml-webpack-plugin
12
Syed Ali Taqi

Après avoir joué avec Webpack dans plusieurs projets, j'ai compris comment Webpack charge les choses. Comme la question est toujours sans réponse, j'ai décidé de le faire moi-même pour toute personne ayant le même besoin.

Structure du répertoire

->assets
  ->css
    ->my-style-1.css //custom styling file 1
    ->my-style-2.css //custom styling file 2

->src
  ->app
    ->app.js
    ->variables.js

  ->libs.js //require all js libraries here
  ->styles-custom.js //require all custom css files here
  ->styles-libs.js //require all style libraries here

->node_modules
->index.html
->package.json
->webpack.config.js

Bundle 1 (code principal de l'application)

app.js: en supposant qu'il s'agit du fichier principal et que l'application démarre à partir d'ici

var msgs = require('./variables');
//similarly import other js files you need in this bundle

//your application code here...
document.getElementById('heading').innerText = msgs.foo;
document.getElementById('sub-heading').innerText = msgs.bar;

Bundle 2 (modules js)

libs.js: ce fichier nécessitera tous les modules nécessaires

require('bootstrap');
//similarly import other js libraries you need in this bundle

Bundle 3 (fichiers css externes)

styles-libs.js: ce fichier nécessitera tous les fichiers css externes

require('bootstrap/dist/css/bootstrap.css');
//similarly import other css libraries you need in this bundle

Bundle 4 (fichiers css personnalisés)

styles-custom.js: ce fichier nécessitera tous les fichiers css personnalisés

require('../assets/css/my-style-1.css');
require('../assets/css/my-style-2.css');
//similarly import other css files you need in this bundle

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'app': './src/app/app.js', //specifying bundle with custom js files
        'libs': './src/libs.js', //specifying bundle with js libraries
        'styles-custom': './src/styles-custom.js', //specifying bundle with custom css files
        'styles-libs': './src/styles-libs.js', //specifying bundle with css libraries
    },
    module: {
        loaders: [
            //used for loading css files
            {
                test: /\.css$/,
                loader: extractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            //used for loading fonts and images
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //directory for output files
        filename: '[name].js' //using [name] will create a bundle with same file name as source
    },
    plugins: [
        new extractTextPlugin('[name].css'), //is used for generating css file bundles

        //use this for adding jquery
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jQuery'
        })
    ]
}

index.html

<head>
  <link rel="stylesheet" href="dist/styles-libs.css" />
  <link rel="stylesheet" href="dist/styles-custom.css" />
</head>
<body>
  <h2 id="heading"></h2>
  <h3>
    <label id="sub-heading" class="label label-info"></label>
  </h3>
  <script src="dist/libs.js"></script>
  <script src="dist/app.js"></script>
</body>
8
Syed Ali Taqi
  1. Vous pouvez inclure des fichiers css et JS en utilisant l'importation dans es6 dans les fichiers source de votre projet. Exemple:

import './style.css';

import Style de './path/style.js';

NB. Généralement, vous devez coder en es5 dans le fichier webpack.config.js . Si vous souhaitez utiliser es6, suivez simplement le lien Comment puis-je utiliser ES6 dans webpack.config.js?

  1. Vous pouvez utiliser https://github.com/webpack/css-loader pour la configuration CSS.

  2. Vous pouvez utiliser le fractionnement de code dans le webpack et spécifier plusieurs points d'entrée, mais cela générera plusieurs fichiers de sortie. Jetez un œil à la section des points d'entrée multiples de ce lien suivant. https://webpack.github.io/docs/code-splitting.html

10
Rafi Ud Daula Refat