在 Webpack 中,如何通过单个条目 main.js(文件中有多个 css 文件)获得多个输出?
In Webpack, how to get multiple outputs with a single entry main.js(having multiple css files inside files)?
我的目录结构应该是这样的。
|-src/
| |-styles/ (less)
| | |-xx.less(input inside main.js)
| | |-yy.less(input inside main.js)
| | |-zz.less(input inside main.js)
|
|-dist/
|-assets/
| |-xx.css(output should be like this)
| |-yy.css(output should be like this)
| |-zz.css(output should be like this)
我的 main.js 文件包含,
require('./styles/xx.less');
require('./styles/yy.less');
require('./styles/zz.less');
我的切入点是
entry: {
app: './main.js'
},
1。如何将输出作为块(xx.css、yy.css、zz.css)?
2. 在那里尝试了 extractTextPlugin 我能够以 app.css 的名称获得输出,但不是我想要的。
我可以尝试使用哪个插件提取与 main.js 文件中相同名称和输入数量的输出?
您可以将 css 需求分隔到文件和它们的入口点中。
例如:
xx.less.js
require('./styles/xx.less');
并且在 webpack 条目中:
app: [path.join(__dirname, 'path/to/xx.less.js')]
并使用节点脚本或其他方式多次调用 webpack
更详尽的答案:
webpack 配置中的每个条目代表将要创建的捆绑文件,入口点到起点 js 文件和每个 css 文件将根据 [=55= 的引用创建] 在那个 js 文件中。
所以如果你想要几个 css 文件,你需要在你的 webpack 配置中有几个条目,条目中的每个 js 都需要它的 less 文件,这样你将得到 3 个 js 文件和 3 个 css 文件,所以你的配置应该是这样的:
{
entry: {
xx: [ path.resolve(__dirname, 'path/to/js/xx.js')],
yy: [ path.resolve(__dirname, 'path/to/js/yy.js')],
zz: [ path.resolve(__dirname, 'path/to/js/zz.js')]
},
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: '[name].js' //the placeholder name will be replace by the entry name (xx,yy,zz)
}
...
plugins: [
new ExtractTextPlugin({
filename: '[name].css' //this is the name of the css according to the entry in the js file
})
}
你的 less loader 应该保持不变,只指向所有 less 文件所在的 src/styles 和你的 javascript 文件(xx.js,yy.js, zz.js) 你应该需要相应的less文件
在xx.js你调用xx.less:require('./styles/xx.less');
在yy.js你调用yy.less:require('./styles/yy.less');
在zz.js你调用zz.less:require('./styles/zz.less');
当你 运行 webpack 时,他将 3 css 个文件(和 3 个 js 文件...)
我的目录结构应该是这样的。
|-src/
| |-styles/ (less)
| | |-xx.less(input inside main.js)
| | |-yy.less(input inside main.js)
| | |-zz.less(input inside main.js)
|
|-dist/
|-assets/
| |-xx.css(output should be like this)
| |-yy.css(output should be like this)
| |-zz.css(output should be like this)
我的 main.js 文件包含,
require('./styles/xx.less');
require('./styles/yy.less');
require('./styles/zz.less');
我的切入点是
entry: {
app: './main.js'
},
1。如何将输出作为块(xx.css、yy.css、zz.css)? 2. 在那里尝试了 extractTextPlugin 我能够以 app.css 的名称获得输出,但不是我想要的。 我可以尝试使用哪个插件提取与 main.js 文件中相同名称和输入数量的输出?
您可以将 css 需求分隔到文件和它们的入口点中。 例如:
xx.less.js
require('./styles/xx.less');
并且在 webpack 条目中:
app: [path.join(__dirname, 'path/to/xx.less.js')]
并使用节点脚本或其他方式多次调用 webpack
更详尽的答案:
webpack 配置中的每个条目代表将要创建的捆绑文件,入口点到起点 js 文件和每个 css 文件将根据 [=55= 的引用创建] 在那个 js 文件中。
所以如果你想要几个 css 文件,你需要在你的 webpack 配置中有几个条目,条目中的每个 js 都需要它的 less 文件,这样你将得到 3 个 js 文件和 3 个 css 文件,所以你的配置应该是这样的:
{
entry: {
xx: [ path.resolve(__dirname, 'path/to/js/xx.js')],
yy: [ path.resolve(__dirname, 'path/to/js/yy.js')],
zz: [ path.resolve(__dirname, 'path/to/js/zz.js')]
},
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: '[name].js' //the placeholder name will be replace by the entry name (xx,yy,zz)
}
...
plugins: [
new ExtractTextPlugin({
filename: '[name].css' //this is the name of the css according to the entry in the js file
})
}
你的 less loader 应该保持不变,只指向所有 less 文件所在的 src/styles 和你的 javascript 文件(xx.js,yy.js, zz.js) 你应该需要相应的less文件
在xx.js你调用xx.less:require('./styles/xx.less');
在yy.js你调用yy.less:require('./styles/yy.less');
在zz.js你调用zz.less:require('./styles/zz.less');
当你 运行 webpack 时,他将 3 css 个文件(和 3 个 js 文件...)