javascript - webpack-- css为什么不能单独打包出来?

 藏A组合别_577 发布于 2022-11-11 02:53

webpack.config.js

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

module.exports = {
    entry: {
        app: './src/app.js',
        vendor: ['jquery']
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "[name].js?1.2.1"
    },
    module: {
        loaders: [
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin("[name].css?1.2.1"),
        new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js',{
            allChunks: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
    ]
}

HTML:




    
    DEMO
    


    





目录:

2 个回答
  • 你在那个页面js文件中引入了scss?

    类似如下:

    js文件中引入css

    import 'appcss';
    import Vue from 'vue';

    基本配置和你一样, 我的可以提取出css

    2022-11-12 01:47 回答
  • 你的app.js或者content.js中要有如下代码才会打包出来

    import './style.scss';//ES6
    require './style/scss';//ES5

    没有这些代码的话,webpack不知道你在哪里引入了scss,当然也就谈不上打包出来了。

    2022-11-12 01:47 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有