使用 Webpack 导入 CSS 和 JS 文件

更新时间：2022-05-14 02:11:53

在多个项目中使用 Webpack 之后，我弄清楚了 Webpack 是如何加载东西的.由于问题仍未得到解答，我决定为有相同需求的任何人自己做.

After playing out with Webpack in multiple projects, I figured out how Webpack loads stuff. Since the question is still unanswered, I decided to do it myself for anybody with same need.

目录结构

->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(应用的主要代码)

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

app.js: assuming this is main file and app starts from here

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:这个文件需要所有需要的模块

libs.js: this file will require all modules needed

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

捆绑包 3(外部 css 文件)

styles-libs.js:这个文件需要所有的外部 css 文件

styles-libs.js: this file will require all external css files

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

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

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

styles-custom.js: this file will require all custom css files

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>

上一篇 : ：如何使用 Webpack 导入 Chart.js下一篇 : 理解在 Selenium 中执行异步脚本

使用 Webpack 导入 CSS 和 JS 文件

相关阅读

技术问答最新文章