[英]Webpack especific css bundle
我在 webpack 3.11 中有以下代碼
var path = require('path');
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
if (process.argv.indexOf('-p') !== -1) {
process.env.NODE_ENV = 'production';
}
let config = {
output: {
path: __dirname + '/dist',
}
}
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractSCSS = new ExtractTextPlugin('bundle.css');
module.exports = {
entry: {
bundle2: "./src2/main2.js",
bundle: "./src/main.js",
},
output: {
path: config.output.path,
filename: '[name].js',
},
module: {
rules: [{
test: /\.scss$/,
use: extractSCSS.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}]
})
}
]
},
devtool: 'source-map',
plugins: [
extractSCSS
],
devServer: rutasServer
};
例如,我想要的是能夠從 src 文件夾中存在的 scss 文件創建一個 bundle.css,同時為 src2 文件夾中存在的 scss 文件創建一個 bundle2.css。 是否可以?
您可以創建不同的條目並在它們上使用css-minify-plugin
或extract-plugin
。
在你的 webpack.config.js 上:
entry: {
bundle1: ['./src/your/path.scss'],
bundle2: ['./src/your/other-path.scss'],
},
和插件:
new ExtractTextPlugin({ filename: 'css/[name].css' }),
實際上 ExtractTextPlugin 已被棄用。 嘗試使用mini-css-extract-plugin
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.