Webpack4-从较少的文件导入的CSS文件不是';不要缩小
我正在用Webpack4做一个项目。事实上,所有这些都能正常工作,我只是在缩小CSS方面遇到了麻烦 如果在我的入口点中包含一个.css或.less文件,那么一切都正常工作。如果我使用Webpack4-从较少的文件导入的CSS文件不是';不要缩小,css,webpack-4,Css,Webpack 4,我正在用Webpack4做一个项目。事实上,所有这些都能正常工作,我只是在缩小CSS方面遇到了麻烦 如果在我的入口点中包含一个.css或.less文件,那么一切都正常工作。如果我使用@include./myfile.less',它也可以正常工作。但是,如果我使用@include./myfile.css',则该节将在不缩小的情况下导入 如何使导入的CSS文件正常工作 webpack.config const path = require('path'); const HtmlWebpackPlug
@include./myfile.less'
,它也可以正常工作。但是,如果我使用@include./myfile.css'
,则该节将在不缩小的情况下导入
如何使导入的CSS文件正常工作
webpack.config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
'app': './src/app/app.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.html/,
use: 'html-loader'
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader",
"less-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader?name=assets/images/[path][name].[ext]?[hash]']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader?name=assets/fonts/[name].[ext]?[hash]'
]
}
],
},
plugins: [
new HtmlWebpackPlugin({ template: './src/public/index.html' }),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].bundle.css",
chunkFilename: "[id].css"
}),
]
};
我找到了便条
以下是解决问题的方法:
具体增加:
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
...
module.exports = {
...
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
}
虽然Webpack5可能内置了CSS最小化功能,但Webpack4需要自带自己的CSS最小化功能。要缩小输出,请使用类似optimize css assets webpack插件的插件。设置optimization.minimizer会覆盖webpack提供的默认值,因此请确保还指定了JS minimizer webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
谢谢你的回答,但请在你的回答中添加一些描述,这些描述可以让你的回答更可靠、更容易理解。这已经过时了
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true
}
}
]