importer les fichiers CSS et JS en utilisant Webpack

J'ai une structure de répertoire comme ceci:

importer les fichiers CSS et JS en utilisant Webpack

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 de séparer le CSS et le JS faisceaux comme ceci:

personnalisé-les styles.css, custom-js.js, style-libs.css, js-libs.js

où style-libs et js-libs doit contenir syles et js fichiers 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 le rendu de tous les composants correctement à l'exception du chargement de la JS externe et le fichier CSS à l'aide webpack.

Je ne suis pas très expérimenté avec webpack et de le trouver très difficile il me faire entendre autour d'elle. Il y a quelques questions simples:

1- Est cette configuration correcte? Si oui, alors comment puis-je inclure mon CSS et JS fichiers de composants à l'aide de ES6. Quelque chose comme import mot-clé.

2- Devrais-je être même à l'aide de webpack pour les fichiers CSS?

3- Comment spécifier les répertoires d'entrée et de leur sortie respective des fichiers dans webpack? Quelque chose comme all-custom.js devraient être de sortie pour custom1.js et custom2.js?

Je sais que ce sont des question et j'ai essayé Google mais n'ai pas trouvé un tutoriel simple pour Webpack qui est simple et objectifs les débutants.

OriginalL'auteur Syed Ali Taqi | 2016-08-18

  1. 10
    1. Vous pouvez inclure le css & JS fichiers à l'aide de l'importation dans l'es6 dans les fichiers source de votre projet. exemple:

    importer './style.css';

    importer le Style de". /path/style.js';

    NB. Généralement, Vous avez besoin de code dans l'es5 dans webpack.config.js fichier. Si vous souhaitez utiliser es6 il suffit de suivre le lien Comment puis-je utiliser dans l'ES6 webpack.config.js?

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

    2. Vous pouvez utiliser le code de découpage en webpack et spécifier plusieurs point d'entrée mais que va générer plusieurs fichiers de sortie. Avoir un regard sur plusieurs point d'entrée de la section de que lien suivant.
      https://webpack.github.io/docs/code-splitting.html

    Je n'ai même mais webpack n'est pas de générer des fichiers pour styles. u peut regarder dans mon code et déterminer où se trouve quelque chose de mal?
    vous pouvez importer le css directement dans le client.js après la configuration de l'webpack.config.js . et de la manière recommandée pour configurer webpack.config.js peuvent être trouvés ici github.com/webpack/webpack/issues/1789
    il a essayé. pas de chance.
    pouvez-vous partager votre code complet ou un projet de test afin que je puisse vérifier.
    Il était utile ;=) Rafi Ud Daula Refat

    OriginalL'auteur Rafi Ud Daula Refat

  2. 8

    Après avoir joué avec Webpack dans plusieurs projets, j'ai compris comment Webpack charges de trucs. Depuis, la question est toujours sans réponse, j'ai décidé de le faire moi-même pour quelqu'un avec la même nécessité.

    Structure de 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

    Groupe 1 (code principal de l'app)

    app.js: en supposant que c'est le fichier principal et l'application commence à 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 (js modules)

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

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

    Groupe 3 (fichiers css externes)

    styles-libs.js: ce fichier devra avoir 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 exigera que 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>

    OriginalL'auteur Syed Ali Taqi