Webpack 1.12:捆绑CSS文件 [英] Webpack 1.12: Bundle css files
问题描述
我已成功捆绑.js文件并使用加载程序正确处理它们.我当前的配置在这里:
I'm successfully bundling .js files and processing them correctly with the loaders. My current config is here:
"use strict";
var webpack = require("webpack");
module.exports = {
entry: {
main: 'main.js',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"],
},
output: { path: "../resources/public", filename: 'bundle.js' },
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"static/vendor.bundle.js"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
],
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0']
}
}
]
},
};
我现在有一堆css文件,其中一些也来自供应商模块.如何以相同的方式将它们捆绑到我自己的(只有一个)bundle.css和模块的vendor.bundle.css中,类似于上面的结构?
I now have a bunch of css files, some of them from the vendor modules as well. How do I bundle them in the same manner to a bundle.css for my own(there's just one) and vendor.bundle.css for the modules, similar to the structure above?
推荐答案
我相信extract-text-webpack-plugin正是您要实现的目标.更多信息此处.我在所有的webpack版本中都使用了它,并且实现起来很简单.您还需要将style-loader/css-loader与提取文本插件一起使用.完成所有操作后,您的webpack配置应如下所示.var webpack = require("webpack");
I believe the extract-text-webpack-plugin is exactly what you want for achieving this. More info here. I use it on all my webpack builds and rather simple to implement. You will also need to use style-loader/css-loader along with the extract text plugin. Once you do all that your webpack config should look something like this. var webpack = require("webpack");
module.exports = {
entry: {
main: 'main.js',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"],
},
output: { path: "../resources/public", filename: 'bundle.js' },
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"static/vendor.bundle.js"),
new ExtractTextPlugin("[name].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
],
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader"),
},
]
},
};
从那里开始,只需在main.js文件中需要您的css文件.
From there just require your css file within your main.js file.
require('./path/to/style.css');
现在,当您运行webpack时,它应该在根目录中输出一个css文件.
Now when you run webpack it should output a css file within your root directory.
这篇关于Webpack 1.12:捆绑CSS文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!