webentwicklung-frage-antwort-db.com.de

Importieren Sie CSS- und JS-Dateien mit Webpack

Ich habe eine Verzeichnisstruktur wie folgt:

enter image description here

und innerhalb von node_modules:

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

Ich muss separate CSS- und JS-Bundles wie folgt generieren:

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

wo style-libs und js-libs sollte syles- und js-Dateien aller Bibliotheken wie bootstrap und jQuery enthalten. Folgendes habe ich bisher getan:

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'));

Ich kann die App ausführen und alle Komponenten korrekt rendern, mit Ausnahme des Ladens der externen JS- und CSS-Datei mit webpack.

Ich habe nicht viel Erfahrung mit Webpacks und finde es sehr schwierig, mein Gehör darum zu wickeln. Es gibt ein paar einfache Fragen:

1- Ist diese Konfiguration korrekt? Wenn ja, wie kann ich meine CSS- und JS-Dateien mit ES6 in Komponenten einbinden? So etwas wie import keyword.

2- Soll ich überhaupt ein Webpack für CSS-Dateien verwenden?

3- Wie spezifiziere ich einzelne Verzeichnisse für die Eingabe und ihre jeweiligen Ausgabedateien im Webpack? Etwas wie all-custom.js sollte ausgegeben werden für custom1.js und custom2.js ?

Ich weiß, dass dies einige sehr grundlegende Fragen sind, und ich habe Google ausprobiert, aber kein einziges Tutorial für Webpack gefunden, das einfach ist und Anfänger anspricht.

12
Syed Ali Taqi

Nachdem ich in mehreren Projekten mit Webpack gespielt hatte, fand ich heraus, wie Webpack Inhalte lädt. Da die Frage immer noch unbeantwortet ist, habe ich mich entschlossen, sie für alle zu tun, die das gleiche Bedürfnis haben.

Verzeichnisstruktur

->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 (Hauptcode der App)

app.js: Angenommen, dies ist die Hauptdatei und die App startet von hier

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 Module)

libs.js: Diese Datei benötigt alle benötigten Module

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

Bundle 3 (externe CSS-Dateien)

styles-libs.js: Für diese Datei werden alle externen CSS-Dateien benötigt

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

Bundle 4 (benutzerdefinierte CSS-Dateien)

styles-custom.js: Für diese Datei sind alle benutzerdefinierten CSS-Dateien erforderlich

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. Sie können CSS- und JS-Dateien mithilfe des Imports in es6 in die Quelldateien Ihres Projekts einbeziehen. Beispiel:

import './style.css';

importiere Style aus './path/style.js';

NB. Im Allgemeinen müssen Sie es5 in der Datei webpack.config.js codieren. Wenn Sie es6 verwenden möchten, folgen Sie einfach dem Link Wie kann ich ES6 in webpack.config.js verwenden?

  1. Sie können https://github.com/webpack/css-loader für die CSS-Konfiguration verwenden.

  2. Sie können die Codeteilung in Webpack verwenden und mehrere Einstiegspunkte angeben, wodurch jedoch mehrere Ausgabedateien generiert werden. Schauen Sie sich den Abschnitt mit mehreren Einstiegspunkten dieses folgenden Links an. https://webpack.github.io/docs/code-splitting.html

10