Webpack 无法缩小CSS文件
我正试图在我的项目中使用网页4。除了Webpack 无法缩小CSS文件,webpack,minify,webpack-4,Webpack,Minify,Webpack 4,我正试图在我的项目中使用网页4。除了提取文本网页包插件,所有插件都可以工作 实际行为:当我构建项目时,完全没有错误,并且文件也缩小了 预期行为:在dist文件夹中获取缩小的CSS文件(styles.CSS) 输出 文件结构 webpack.config const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); cons
提取文本网页包插件
,所有插件都可以工作
实际行为:当我构建项目时,完全没有错误,并且文件也缩小了
预期行为:在dist
文件夹中获取缩小的CSS文件(styles.CSS
)
输出
文件结构
webpack.config
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'index': './src/index.js',
},
resolveLoader: {
modules: [
'node_modules',
],
},
mode: 'production',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract( 'css-loader' ),
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
emitFile: false,
},
},
],
},
],
},
plugins: [
new ExtractTextPlugin( {
filename: './src/styles.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
hash: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
removeComments: true,
removeEmptyAttributes: true,
minifyCSS: true,
},
}),
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true,
},
sourceMap: true,
}),
],
};
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/index.js', './src/styles.css'],
resolveLoader: {
modules: [
'node_modules',
],
},
mode: 'production',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
loader: 'css-loader',
options: {
minimize: true,
},
}),
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
emitFile: false,
},
},
],
},
],
},
plugins: [
new ExtractTextPlugin( {
filename: './styles.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
hash: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
removeComments: true,
removeEmptyAttributes: true,
minifyCSS: true,
},
}),
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true,
},
sourceMap: true,
}),
],
};
你需要:
条目:['./src/index.js','./src/styles.css']
ExtractTextPlugin
use: ExtractTextPlugin.extract({
loader: 'css-loader',
options: {
minimize: true,
},
})
插件中文件的路径名
文件名:'./styles.css'
完整配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'index': './src/index.js',
},
resolveLoader: {
modules: [
'node_modules',
],
},
mode: 'production',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract( 'css-loader' ),
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
emitFile: false,
},
},
],
},
],
},
plugins: [
new ExtractTextPlugin( {
filename: './src/styles.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
hash: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
removeComments: true,
removeEmptyAttributes: true,
minifyCSS: true,
},
}),
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true,
},
sourceMap: true,
}),
],
};
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/index.js', './src/styles.css'],
resolveLoader: {
modules: [
'node_modules',
],
},
mode: 'production',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
loader: 'css-loader',
options: {
minimize: true,
},
}),
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
emitFile: false,
},
},
],
},
],
},
plugins: [
new ExtractTextPlugin( {
filename: './styles.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
hash: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
removeComments: true,
removeEmptyAttributes: true,
minifyCSS: true,
},
}),
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true,
},
sourceMap: true,
}),
],
};
看看这个。希望对配置有所帮助。对于几个月后回答这个问题的人,
css loader
不再有minimize
选项,现在建议使用cssnano
或优化css资产网页包插件进行后期处理。要扩展上面的评论,以下是webpack v4文档的链接,说明如何设置CSS缩小: