- 1慕匠、webpack 多個單頁面入口肋演，需要重復寫多個entry;
- 2、webpack entry不支持glob薪伏，不可以使用模糊匹配符號
- 3滚澜、webpack 會打包所有的css到一個文件，而有需求是分開輸出
一嫁怀、解決webpack會打包所有css到一個文件
入口要命名设捐，分開寫，就會分開打包
const entry = require('webpack-glob-entry')
module.exports = [
{
entry: {
index: './src/index.css',
main: './src/main.css',
},
...
},
二塘淑、解決以css為入口文件時挡育，仍然會輸出多余的空js文件
引入修正插件，會刪除多余的js文件
npm install -D webpack-fix-style-only-entries
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')
module.exports = {
plugins: [
new FixStyleOnlyEntriesPlugin(),
...
],
},
三朴爬、解決webpack不支持glob即寒，模糊匹配問題
npm install -D webpack-glob-entry
const entry = require('webpack-glob-entry')
module.exports = [
{
entry: entry('./src/*.scss'),
...
},
四、最終webpack.config.js配置
以下配置用于將多個scss文件轉換成多個css文件
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const entry = require('webpack-glob-entry')
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const baseConfig = {
module : {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader']
}),
}
]
},
output: {
path: path.resolve(__dirname, './lib'),
},
}
module.exports = [
{
...baseConfig,
entry: entry('./src/*.scss'),
plugins: [
new FixStyleOnlyEntriesPlugin(),
new ExtractTextPlugin({
filename: `/css/[name].css`,
}),
],
},
{
...baseConfig,
entry: entry('./src/component/*.scss'),
plugins: [
new FixStyleOnlyEntriesPlugin(),
new ExtractTextPlugin({
filename: `/css/component/[name].css`,
}),
],
},
];
