when using the extract-text-webpack-plugin plug-in to extract css files, the css files, less files, and embedded styles found will be compressed and packaged into css/main.css files, but I want to package the css files separately and customize the file name, why not?
here is the configuration file:
var path = require("path")
var webpack = require("webpack")
const HtmlWebpackPlugin=require("html-webpack-plugin");
const CleanWebpackPlugin=require("clean-webpack-plugin");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
const ExtractCSS = new ExtractTextPlugin({
filename: "css/[name].css" //
});
const ExtractLESS = new ExtractTextPlugin({
filename: "css/[name].css" //
});
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "build-[hash].js"
},
module: {
rules: [
{
test: /\.css$/,
/*use: [
"vue-style-loader",
"css-loader"
],*/
loader: ExtractCSS.extract({ fallback: "style-loader", use: "css-loader" }),
exclude: /node_modules/,
},
{
test:/\.less$/,
use:ExtractLESS.extract({ //lesscss
fallback:"style-loader",
use:["css-loader","less-loader"]
}),
exclude: /node_modules/,
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
less: ExtractTextPlugin.extract({ fallback: "vue-style-loader", use: "css-loader!less-loader" }),
css: ExtractTextPlugin.extract({ fallback: "vue-style-loader", use: "css-loader" })
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "url-loader",
options: {
name: "[name].[ext]?[hash]",
limit:"1024",
outputPath:"img/"
}
}
]
},
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue", ".json"]
},
devServer: {
contentBase:"./dist",
historyApiFallback: true,
noInfo: true,
overlay: true,
port:"6001"
},
performance: {
hints: false
},
devtool: "-sharpeval-source-map",
}
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "-sharpsource-map"
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: ""production""
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
if (process.env.NODE_ENV === "development") {
module.exports.devtool = "-sharpsource-map"
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: ""development""
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.BannerPlugin(""),
new HtmlWebpackPlugin({
title:"",
filename:"./index.html",
template:__dirname+"/src/index.temp.html"
}),
new CleanWebpackPlugin("dist", {
root: __dirname,
verbose: true,
dry: false
}),
ExtractCSS,
ExtractLESS
])
}
the following is the packaged source file directory:
cssless
it can be seen that there is only one css file after packaging, and the content of the file is the compressed file of the sum of all the css styles in the source file. How can we achieve sub-file extraction?