Question

问候一个人，

我一直在玩Webpack的Bootstrap，但我正在撕裂我的头发。我真的经历了大量的博客文章，他们要么使用7个月过时的'bootstrap-webpack'插件（令人惊讶的是开箱即用）或者..它们包括通过导入的bootstrap文件'node_modules / * /自举/ CSS / bootstrap.css'。

当然，必须有更清洁，更有效的方法来解决这个问题？

这是我当前的webpack.config.js文件：

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/js/main.js')
    },
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.css$/,
            loaders: ['style', 'css']
        }, {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        }, {
            test: /\.sass$/,
            loader: 'style!css!sass?sourceMap'
        },{
            test: /\.less$/,
            loaders: ['style', 'css', 'less']
        }, {
            test: /\.woff$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
        }, {
            test: /\.woff2$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
        }, {
            test: /\.(eot|ttf|svg|gif|png)$/,
            loader: "file-loader"
        }]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '/js/bundle.js',
        sourceMapFilename: '/js/bundle.map',
        publicPath: '/'
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        extensions: ['', '.js', '.sass'],
        modulesDirectories: ['src', 'node_modules']
    },
    devServer: {
        inline: true,
        contentBase: './dist'
    }
};

我可以去require('bootstrap')（以某种方式让jQuery在其中工作），但是......我很好奇你们所想的和所做的事情。

提前致谢：）

Answer 1

我不确定这是不是最好的方法，但是跟我工作vue.js webapp很好。您可以看到工作代码here。

我在index.html中包含了bootstrap所需的文件，如下所示：

<head>
  <meta charset="utf-8">
  <title>Hey</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
  <script  href="/static/bootstrap.js"></script>
</head>

这样可以执行回购。为什么我这样做是因为我必须在customise中bootstrap进行一些配置，所以我必须更改变量文件并构建引导我的代码bootstrap.js和bootstrap.css文件，我在这里使用。

通过使用npm包和webpack自定义，有一种建议here的替代方法。

首先在项目中安装bootstrap：

npm install bootstrap@4.0.0-alpha.5

并确保您可以在组件中使用sass-loader：

npm install sass-loader node-sass --save-dev

现在转到你的webpack配置文件并添加一个带有以下内容的sassLoader对象：

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot应该只指向您可以导航到node_packages的位置，在我的情况下，这是：path.resolve(__dirname, '../')

现在您可以直接在.vue文件中使用bootstrap，webpack会在您添加以下内容时为您编译：

<style lang="scss">
  @import "bootstrap";
</style>

Answer 2

我强烈建议您使用bootstrap-loader。您在根文件夹中添加了一个配置文件（.bootstraprc），您可以在其中排除您不想要的引导元素，并告诉您variables.scss和bootstrap.overrides.scss的位置。定义SCSS变量，执行覆盖，添加webpack条目并继续您的生活。

Answer 3

我使用webpack直接从.less和.scss文件构建引导程序。这样可以通过覆盖.less / .scss中的源代码来自定义引导程序，并且仍然可以获得webpack的所有好处。

您的代码缺少任何.css / .less / .scss文件的入口点。您需要为已编译的CSS文件包括一个入口点。对于此入口点，我用const声明一个数组，然后在该数组中包含要Webpack编译的源文件的路径。

当前，我正在使用带有基本自定义模板和第二个自定义主题的引导程序3。基本模板使用bootstrap .less文件样式，并且具有以.less文件编写的特定源替代。

第二个自定义主题使用.sass文件样式，并且具有与.scss文件中编写的引导程序基础类似的替代。因此，我需要尝试优化所有这些样式以用于生产（当前大约为400kb，但这有点沉重，因为我们选择避免在中国使用CDN来定位目标）。

下面是一个参考webpack.config.js，它可以从.less / .scss / .css文件进行构建，并且还可以完成其他一些工作，例如构建打字稿模块，并使用Babel将es6 / typescript转换为与浏览器兼容的javascript 。输出最终结束在我的/static/dist文件夹中。

const path = require('path');
const webpack = require('webpack');

// plugins
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


// take debug mode from the environment
const debug = (process.env.NODE_ENV !== 'production');
// Development asset host (webpack dev server)
const publicHost = debug ? 'http://localhost:9001' : '';
const rootAssetPath = path.join(__dirname, 'src');


const manifestOptions = {
    publicPath: `${publicHost}/static/dist/`,
  };

const babelLoader = {
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    presets: [
        '@babel/preset-env'
    ]
  }
};

const app_css = [
    // specific order generally matters
    path.join(__dirname, 'src', 'bootstrap-template1', 'assets', 'css', 'fonts', 'Roboto', 'css', 'fonts.css'),
    path.join(__dirname, 'node_modules', 'font-awesome', 'css', 'font-awesome.css'),
    // This is bootstrap 3.3.7 base styling writtin in .less
    path.join(__dirname, 'src', 'bootstrap-template1', 'assets',  'less', '_main_full', 'bootstrap.less'),
    // bootstrap theme in .scss -> src\bp\folder\theme\src\scss\styles.scss
    path.join(__dirname, 'src', 'bp', 'folder', 'theme', 'src', 'scss', 'styles.scss'),
    // back to .less -> 'src/bootstrap-template1/assets/less/_main_full/core.less',
    path.join(__dirname, 'src', 'bootstrap-template1', 'assets', 'less', '_main_full', 'core.less'),
    // 'src/bootstrap-template1/assets/less/_main_full/components.less',
    path.join(__dirname, 'src', 'bootstrap-template1', 'assets', 'less', '_main_full', 'components.less'),
    //'src/bootstrap-template1/assets/less/_main_full/colors.less',
    path.join(__dirname, 'src', 'bootstrap-template1', 'assets', 'less', '_main_full', 'colors.less'),
    // <!-- syntax highlighting in .css --> src/bp/folder/static/css/pygments.css
    path.join(__dirname, 'src', 'bp', 'folder', 'static', 'css', 'pygments.css'),
    // <!-- lato/ptsans font we want to serve locally --> src/fonts/googlefonts.css'
    path.join(__dirname, 'src', 'fonts', 'googlefonts.css'),
    // a .css style -> 'src/bp/appbase/styles/md_table_generator.css'
    path.join(__dirname, 'src', 'bp', 'appbase', 'styles', 'md_table_generator.css'),
    // another .css style -> hopscotch 'src/libs/hopscotch/dist/css/hopscotch.min.css'
    path.join(__dirname, 'src', 'libs', 'hopscotch', 'dist', 'css', 'hopscotch.min.css'),
    //LAST final custom snippet styles to ensure they take priority 'src/css/style.css',
    path.join(__dirname, 'src', 'css', 'style.css')
];

const vendor_js = [
    //'core-js',
    'whatwg-fetch',
];

const app_js = [
    // a typescript file! :)
    path.join(__dirname, 'src', 'typescript', 'libs', 'md-table', 'src', 'extension.ts'),
    // base bootstrap 3.3.7 javascript
    path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.js'),
    path.join(__dirname, 'src', 'main', 'app.js'),
    // src/bootstrap-template1/assets/js/plugins/forms/styling/uniform.min.js'
    path.join(__dirname, 'node_modules', '@imanov', 'jquery.uniform', 'src', 'js', 'jquery.uniform.js'),
    // src/bootstrap-template1/assets/js/plugins/ui/moment/moment.min.js'
];

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
    context: process.cwd(), // to automatically find tsconfig.json
    // context: __dirname,
    entry: {
        app_css,
        vendor_js,
        app_js,
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: `${publicHost}/static/dist/`,
        chunkFilename: '[id].[hash:7].js',
        filename: '[name].[hash:7].js'
    },
    resolve: {
        extensions: [".webpack.js", ".web.js",".tsx", ".ts", ".js", ".css"],
        alias: {
            jquery$: path.resolve(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.js'),
        }
    },
    target: "web",
    devtool: 'source-map',
    devServer: {
        // this devserver proxies all requests to my python development server except 
        // webpack compiled files in the `/static/dist` folder 
        clientLogLevel: 'warning',
        contentBase: path.join(__dirname, './src'),
        publicPath: 'dist',
        open: true,
        historyApiFallback: true,
        stats: 'errors-only',
        headers: {'Access-Control-Allow-Origin': '*'},
        watchContentBase: true,
        port: 9001,
        proxy: {
            '!(/dist/**/**.*)': {
                target: 'http://127.0.0.1:8000',
            },
        },
    },
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})],
        splitChunks: {
          cacheGroups: {
            appStyles: {
              name: 'app',
              // https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-css-based-on-entry
              test: (m, c, entry = 'app') =>
                m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
              chunks: 'all',
              enforce: true,
            },
          },
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }),
        // Strip all locales from moment.js except "zh-cn"
        // ("en" is built into Moment and can’t be removed)
        new MomentLocalesPlugin({
            localesToKeep: ['zh-cn'],
        }),
        new ForkTsCheckerWebpackPlugin({
            tslint: true, useTypescriptIncrementalApi: true
        }),
        new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: false }),
        new MiniCssExtractPlugin({
            filename: '[name].[hash:7].css',
            chunkFilename: '[id].[hash:7].css',
            moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.[hash:7].css`
        }),
         new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
            },
            canPrint: true
        }),
        new ManifestPlugin({
            ...manifestOptions
        }),
    ].concat(debug ? [] : [
        // production webpack plugins go here
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            }
        }),
        new ForkTsCheckerWebpackPlugin({
            async: false,
            useTypescriptIncrementalApi: true,
            memoryLimit: 2048
        }),
    ]),
    module: {
        rules: [
                {
                // jinja/nunjucks templates
                test: /\.jinja2$/,
                loader: 'jinja-loader',
                query: {
                    root:'../templates'
                }
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    babelLoader,
                    {
                        loader: 'ts-loader',
                        options:
                            {   // disable type checker - we will use it in
                                // fork-ts-checker-webpack-plugin
                                transpileOnly: true
                            }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    babelLoader
                ]
            },
            {
                test: /\.(html|jinja2)$/,
                loader: 'raw-loader'
            },
            {
                test: /\.(sc|sa|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          hmr: debug,
                            // only use if hmr is not working correctly
                          // reloadAll: true,
                        },
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "sass-loader"
                    },
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          hmr: debug,
                            // only use if hmr is not working correctly
                          // reloadAll: true,
                        },
                    },
                    {
                        loader: 'css-loader', // translates CSS into CommonJS
                    },
                    {
                        loader: 'less-loader', // compiles Less to CSS
                    },
                ],
            },
            {
                test: /\.(ttf|eot|svg|gif|ico)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[hash:7].[ext]',
                            context: rootAssetPath
                        },
                    },
                ],
            },
            {
                test: /\.(jpe?g|png)$/i,
                loader: 'responsive-loader',
                options: {
                    name: '[path][name].[hash:7].[ext]',
                    adapter: require('responsive-loader/sharp'),
                    context: rootAssetPath
                }
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                 loader:'url-loader',
                 options:{
                    limit: 10000,
                    mimetype: 'application/font-woff',
                    // name: ('fonts/[path][name].[hash:7].[ext]'),
                    name: ('fonts/[name].[hash:7].[ext]'),
                 }
            },
            {
                test: require.resolve("jquery"),
                use:[
                    { loader: "expose-loader", options:"$" },
                    { loader: "expose-loader", options:"jQuery" },
                    { loader: "expose-loader", options:"jquery" }
                ]
            }
        ]
    },
};

在Webpack中使用Bootstrap的首选方法

3 个答案: