使用Webpack导入CSS和JS文件

Syed Ali Taqi |

我有这样的目录结构:

在此处输入图片说明

在node_modules内部:

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

我需要像这样生成单独的CSS和JS包:

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

哪里style-libsjs-libs应该包含所有类(如bootstrap和jQuery)的syles和js文件。到目前为止,这是我所做的:

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

除了使用加载外部JS和CSS文件外,我能够运行该应用程序并正确呈现所有组件webpack

我对webpack经验不足,发现很难将我的声音包起来。有几个简单的问题:

1-此配置正确吗?如果是,那么如何使用ES6将CSS和JS文件包含在组件中。import关键字。

2-我是否应该甚至将webpack用于CSS文件?

3-如何在Webpack中指定用于输入的各个目录及其各自的输出文件?all-custom.js应该为custom1.js输出类似的东西custom2.js

我知道这是一个非常基本的问题,我尝试使用Google,但没有找到一个简单且针对初学者的Webpack教程。

Syed Ali Taqi |

在多个项目中使用了Webpack之后,我弄清楚了Webpack如何加载内容。由于问题仍未得到解答,因此我决定亲自为有同样需求的任何人做。

目录结构

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

捆绑软件1(应用程序的主要代码)

app.js:假设这是主文件,并且应用程序从此处开始

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;

套装2(js模块)

libs.js:此文件将需要所需的所有模块

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

捆绑软件3(外部CSS文件)

styles-libs.js:此文件将需要所有外部CSS文件

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

捆绑包4(自定义CSS文件)

styles-custom.js:此文件将需要所有自定义css文件

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法使用Webpack DevServer接收我的js和CSS文件

以文本形式导入和读取CSS文件的内容(React / webpack)

如何使用Typescript,React和Webpack导入SCSS或CSS模块

使用Webpack导入JavaScript文件

如何使用webpack将html,js和css捆绑在一个html文件中?

理解 Angular 导入 JS 和 CSS 文件的方式

如何获取JS和CSS的webpack输出文件的名称?

如何通过Webpack独立捆绑JS和CSS文件?

如何将CSS文件导入webpack?

webpack导入css文件时出现错误

CSS文件未导入到Webpack

使用Gulp和Babel导入和转换JS文件

我可以使用 webpack 导入加载器来要求 CSS 文件以及某些 JS 依赖项吗?(或者,如何隐式加载 CSS)

使用Node.js Gulp在Less中导入.css文件

如何使用Webpack在Vue.js单文件组件中导入json文件

使用CodeIgniter导入js和CSS的最佳方法是什么?

Symfony 4:使用Webpack编译的JS和CSS返回404

Webpack:无法使用url()导入加载CSS

使用Angular.js和C#导入文件

使用webpack ProvidePlugin全局导入javascript文件

使用Webpack在Rails 6视图中导入单个CSS文件的最佳方法

如何使用webpack和babel导入highcharts

使用Mocha和Babel进行测试时处理WebPack CSS导入

使用webpack,ES6,ReactJS导入JavaScript文件和调用函数

使用Webpack 4编译手写笔而不将其导入JS文件?

如何使用 JSON 文件作为 JS 对象而不将其导入到 webpack 编译代码中?

使用Webpack 4在scss中导入字体或图像文件并反应js时出错

Webpack最小和最小的Js和Css

如何组织 js、css 和 scss 文件以进行正确的导入和流水线操作?