在 Webpack 中使用 Bootstrap 的首选方式
Posted
技术标签:
【中文标题】在 Webpack 中使用 Bootstrap 的首选方式【英文标题】：Preferred way of using Bootstrap in Webpack 【发布时间】：2016-07-08 00:01:43 【问题描述】：大家好，
我一直在玩 Webpack 的 Bootstrap，但我快要抓狂了。我已经阅读了大量的博客文章，他们要么使用了 7 个月过时的“bootstrap-webpack”插件（令人惊讶的是它不能开箱即用），或者..它们通过 import 'node_modules/*/ 包含引导文件bootstrap/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 在其中工作），但是.. 我很好奇你们的想法和行为。
提前致谢:)
【问题讨论】：
这可能对你有用github.com/gowravshekar/bootstrap-webpack 是的，就是我提到的那个模块，几个月没更新了。 那么对不起。我现在还不知道。 而现在，5个月过去了，网上还是没有好的答案:( 是的，这实际上是我们还没有完全采用 Webpack 的原因之一，太多像这样的“简单和小”问题会让过去的实际开发过程变得非常烦人。 【参考方案1】：我不确定这是否是最好的方法，但使用vue.js webapp 对我来说很好。你可以看到工作代码here。
我在index.html 中包含了引导程序所需的文件，如下所示：
<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>
这行得通，你可以执行回购。为什么我这样做是因为我必须在bootstrap 中进行customise 一些配置，所以我必须更改变量文件并构建引导程序的代码，它输出了我在此处使用的bootstrap.js 和bootstrap.cssfiles。
建议here 使用 npm 包和 webpack 自定义的另一种方法。
首先在您的项目中安装引导程序：
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>
【讨论】：
谢谢，这是我正在寻找的深入答案！继承人希望他们早日摆脱 jQuery ;) 我必须等待半小时才能提供赏金，但它即将到来:) 这会让我离开一个位置，但我不应该使用 webpack 来捆绑我的引导程序吗？如果我从 index.html 链接到脚本，那么使用 webpack 有什么意义？ @user1585345：我也有同样的想法（一开始也是同样的问题）【参考方案2】：我强烈推荐使用bootstrap-loader。您添加一个配置文件（在您的根文件夹中.bootstraprc），您可以在其中排除您不想要的引导元素并告诉您的variables.scss 和bootstrap.overrides.scss 在哪里。定义您的 SCSS 变量，进行覆盖，添加您的 webpack 条目并继续您的生活。
【讨论】：
【参考方案3】：我使用 webpack 直接从 .less 和 .scss 文件构建引导程序。这允许通过覆盖 .less/.scss 中的源代码来自定义引导程序，并且仍然可以获得 webpack 的所有好处。
您的代码缺少任何 .css/.less/.scss 文件的入口点。您需要为已编译的 css 文件包含一个入口点。对于这个入口点，我用 const 声明了一个数组，然后在数组中包含我希望 webpack 编译的源文件的路径。
目前，我正在使用带有基本自定义模板和第二个自定义主题的 bootstrap 3。基本模板使用引导程序 .less 文件样式，并且它具有写入 .less 文件的特定源代码覆盖。
第 2 个自定义主题使用 .sass 文件样式，并具有与用 .scss 文件编写的引导程序基础类似的覆盖。所以，我需要尝试优化所有这些样式以用于生产（目前大约 400kb，但这有点重，因为我们选择避免 CDN，因为目标是在中国使用）。
下面是一个参考 webpack.config.js，它可以从 .less/.scss/.css 文件构建，还可以做一些其他的事情，比如构建 typescript 模块并使用 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 的首选方式的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Webpack 在生产环境中使用 Bootstrap CSS
Foundation 6 / Bootstrap 4 - 在 webpack 中使用 sass 设置文件的正确方法
webpack encore symfony4中的bootstrap和jquery
带有 WebPack 的 Bootstrap4 的 DataTables 没有集成在 Rails 6 中？