我已经为我的项目设置了webpack-当前,它将CSS主文件从src文件夹传递到dist文件夹,但是,我不确定如何生成主css文件以及标准化css文件(或者甚至有可能,但是我相信应该如此。
我当前的文件夹设置如下:
styles.css和normalize.css都直接存在于根目录中-npm run build完成后,我的dist文件夹中没有normalize文件吗?
我的webpack配置文件如下:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
// instafeed: './src/js/modules/instafeed.js',
reviews: './src/js/modules/reviews.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new MiniCssExtractPlugin('styles.css'),
// new ExtractTextPlugin('styles.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
}),
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/img/logos/favIcon.png',
minify: true,
cache: true
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
// loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: "file-loader?name=[name].[ext]",
options: {
outputPath: 'images'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|webp)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts'
}
}
]
}
]
}
};
真的很感谢您对此主题的任何帮助-预先感谢您- 沃利
p.s。
作为对此的附带说明,dist文件中的所有图像都被命名为哈希文件,有没有一种方法可以防止这种情况,因为我无法找出问题的原因:我认为这是因为我曾告诉过要对图像进行哈希处理的webpack配置,但我无法解决此问题-