1

我有一个 webpack 2 配置，它存在以下问题：1）它不会将图像复制到 dist 文件夹 2）它复制字体但将“css”添加到字体文件的名称中。

这是控制台错误：

GET http://localhost:9000/dist/cssfonts/NotoSans-Regular.ttf

我不确定'css'部分来自哪里，它应该是'dist/fonts/NotoSans-Regular.ttf'

这是我的 webpack.config.js：

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const autoprefixer = require('autoprefixer')


let isProd = process.env.NODE_ENV == 'production';
let cssDev = ['style-loader', 'css-loader?importLoaders=2', 'postcss-loader', 'sass-loader'];
let cssProd = ExtractTextPlugin.extract({
    allChunks: true,
    fallback: "style-loader",
    use: [
            {
                loader: 'css-loader',
                options: {
                    minimize: false,
                    importLoaders: 2
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    minimize: false
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    minimize: false
                }
            }
    ],
    publicPath: "/dist/css"
});

let cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        'js/app': './src/app.js'
    },

    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                }
            },
            {
                test: /\.sass$/,
                use: cssConfig
            },
            {
                test: /\.pug$/,
                use: 'pug-loader?pretty=true'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: 'file-loader?name=img/[name].[ext]'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader?name=fonts/[name].[ext]'
            }
        ]
    },
    devServer: {
        contentBase: __dirname + '/dist',
        compress: true,
        port: 9000,
        open: true,
        hot: true,
        stats: 'errors-only'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Main Page',
            minimize: false,
            favicon: false,
            hash: true,
            excludeChunks: ['js/contact'],
            template: './src/index.pug'
        }),
        new ExtractTextPlugin({
            filename: 'css/app.css',
            disable: !isProd,
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({ options:
            { postcss: [
                autoprefixer({
                    browsers: ['last 5 versions'],
                    supports: true,
                    flexbox: true
                })
            ] }
        })
    ]
};
4

0 回答 0