webpack build less files 输出一个 css minify 文件
webpack build less files output one css minify file
webpack 是我需要将几个较少的文件传递到一个缩小的 CSS 文件中的工具吗?
如果是这样,我不确定我在下面的代码中做错了什么?
有没有办法输出到不同的文件路径,现在我的js文件输出到'./assets/javascripts/bundle/'
,我想让我的css文件输出到'./assets/stylesheets/bundle/'
,我该怎么做?
更新
我做了一个测试,我可以将我的 less 文件构建到一个 css 文件,但仍然无法找到如何为输出文件夹设置多个路径,现在我必须注释掉 js 入口部分并更改输出路径...
webpack 配置
var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
// stylesheets
'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
},
output: {
path: './assets/javascripts/bundle/',
filename: '[name].js'
},
resolve: {
alias: {
jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
"jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
}),
new ExtractTextPlugin("[name].css")
],
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
};
assets/stylesheets/Media/Index/Base.js
require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');
Config.less
@color: 'red';
Index.less
body {
background-color: @{color};
}
你快到了。就像您已经做的那样,您可以使用 ExtractTextPlugin
将所有样式设置到一个 css 文件中。要将您的 js 和 css 放入不同的目录,您可以在 ExtractTextPlugin
或 output.filename
中定义一个相对于您的 output.path
的路径。例如:
output: {
path: './assets',
filename: './javascripts/bundle/[name].js'
},
plugins: [
new ExtractTextPlugin("./stylesheets/bundle/[name].css")
]
webpack 是我需要将几个较少的文件传递到一个缩小的 CSS 文件中的工具吗?
如果是这样,我不确定我在下面的代码中做错了什么?
有没有办法输出到不同的文件路径,现在我的js文件输出到'./assets/javascripts/bundle/'
,我想让我的css文件输出到'./assets/stylesheets/bundle/'
,我该怎么做?
更新
我做了一个测试,我可以将我的 less 文件构建到一个 css 文件,但仍然无法找到如何为输出文件夹设置多个路径,现在我必须注释掉 js 入口部分并更改输出路径...
webpack 配置
var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
// stylesheets
'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
},
output: {
path: './assets/javascripts/bundle/',
filename: '[name].js'
},
resolve: {
alias: {
jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
"jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
}),
new ExtractTextPlugin("[name].css")
],
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
};
assets/stylesheets/Media/Index/Base.js
require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');
Config.less
@color: 'red';
Index.less
body {
background-color: @{color};
}
你快到了。就像您已经做的那样,您可以使用 ExtractTextPlugin
将所有样式设置到一个 css 文件中。要将您的 js 和 css 放入不同的目录,您可以在 ExtractTextPlugin
或 output.filename
中定义一个相对于您的 output.path
的路径。例如:
output: {
path: './assets',
filename: './javascripts/bundle/[name].js'
},
plugins: [
new ExtractTextPlugin("./stylesheets/bundle/[name].css")
]