Webpack 导入引导程序 .js 和 .css

Posted

技术标签:

【中文标题】Webpack 导入引导程序 .js 和 .css【英文标题】:Webpack import bootstrap .js and .css 【发布时间】:2015-12-17 15:02:03 【问题描述】:

我正在使用 es6 和 babel 构建一个使用 react、bootstrap 和 webpack 的应用程序。

但我无法将 boostrap.js 和 bootstrap.css 导入我的应用程序。

我的 webpack.config.js

    var webpack = require('webpack'),
  htmlWebpackPlugin = require('html-webpack-plugin'),
  path = require('path'),
  srcPath = path.join(__dirname, 'src');

module.exports = 
  target: 'web',
  cache: true,
  entry: 
    module: path.join(srcPath, 'module.js'),
    common: ['react', 'react-router', 'alt']
  ,
  resolve: 
    root: srcPath,
    extensions: ['', '.js'],
    modulesDirectories: ['node_modules', 'src']
  ,
  output: 
    path: path.join(__dirname, 'tmp'),
    publicPath: '',
    filename: '[name].js',
    library: ['Example', '[name]'],
    pathInfo: true
  ,

  module: 
    loaders: [
      test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'
    ]
  ,
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),
    new HtmlWebpackPlugin(
      inject: true,
      template: 'src/index.html'
    ),
    new webpack.ProvidePlugin(
           $: "jquery",
           jQuery: "jquery"
    ),
    new webpack.ProvidePlugin(
           bootstrap: "bootstrap.css",
    ),
    new webpack.NoErrorsPlugin()
  ],

  debug: true,
  devtool: 'eval-cheap-module-source-map',
  devServer: 
    contentBase: './tmp',
    historyApiFallback: true
  
;

所以在我的 .js 文件(反应组件)中,我正在尝试做:导入“引导程序”。但是css没有被实施。 .js 导入效果很好。

那么如何导入 boostrap 或配置 webpack?

【问题讨论】:

我设法使用找到的指南 here 完成了它:它只有助于加载 bootstrap.css,但这就是我所需要的。 【参考方案1】:

只需使用 less 插件并正确声明它们...

// Webpack file

  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader"
,
// I have to add the regex .*? because some of the files are named like... fontello.woff2?952370

  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/,
  loader: 'url?limit=50000'


// Less file
@import '~bootstrap/less/bootstrap';

我仍在开发 JS,但我会尽快通知您 :-)

【讨论】:

【参考方案2】:

您需要执行以下操作才能使其正常工作:

    在您的 webpack 配置文件 resolve 部分中,确保包含您的引导 css 文件路径。

举个例子:

var bootstrapPath = path.join(
    __dirname,
    'development/bower_components/bootstrap/dist/css'
);

然后在你的 webpack 配置对象中:

resolve: 
    alias: 
        jquery: path.join(__dirname, 'development/bower_components/jquery/jquery')
    ,
    root: srcPath,
    extensions: ['', '.js', '.css'],
    modulesDirectories: ['node_modules', srcPath, commonStylePath, bootstrapPath]

    确保您有样式加载器和 css 加载器。例如。 loaders:[ test: /\.css$/, loader: "style-loader!css-loader" ] 在你的 js 文件中使用它 require('bootstrap.min.css');

【讨论】:

以上是关于Webpack 导入引导程序 .js 和 .css的主要内容,如果未能解决你的问题,请参考以下文章

使用 Angular 7 + Webpack 4 封装 css

vuecli webpack 外部js 怎么导入

通过 webpack 导入时,引导工具提示不适用于 jquery.slim

如何缓存 Rails webpack 包

如何配置 webpack 以使用 css-modules 为 Next.js 应用程序构建反应组件库?

如何使用 Webpack 进行引导?