提取css的app.min.css

来源:3-13 由浅入深 webpack - 处理 CSS - 提取 CSS

kumayato

2018-09-26

按照老师提取css的步骤来的,为什么打包出来的app.min.css里面下面多了一串js的代码。
下面是我webpack config的配置

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// style-loader/url css样式会以link标签的形式插入
// style-loader/useable 使用或者不使用某个样式

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: {
                    loader: 'style-loader',
                    options: {
                        singleton: true
                    }
                },
                use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            modules: true,
                            // CSS module 打包出来的class名规则
                            localIdentName: '[path][name]-[local]-[hash:base64:5]'
                        },
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename : '[name].min.css',
            allChunks: false
        })
    ]
}

打包出来的css文件,下面多了一些js,不知道是为什么。
图片描述

写回答

1回答

qbaty

2018-09-28

extract-text-webpack-plugin 和新版本的不匹配,我升级webpack 4 以后也碰到了这样的问题,把extract-text-webpack-plugin 换成官方新出的 mini-css-extract-plugin 就可以了

0
1
kumayato
非常感谢!
2018-09-29
共1条回复

四大维度解锁Webpack3.0前端工程化

前端开发标配,灵活掌握Webpack3.0的使用可以极大的提高前端开发的效率

1188 学习 · 403 问题

查看课程