ExtractTextPlugin只能加载部分css文件

Question

Mac+WebStorm2017.3.3+Node.js v8.9.4+webpack v3.10.0+webpack-dev-server v2.11.1    

web.config.js

const webpack             = require('webpack');
const ExtractTextPlugin   = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin   = require('html-webpack-plugin');
//环境变量配置    dev/inline
const WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
// 获取html-webpack-plugin参数的方法
const getHtmlConfig = function(name, title){
    return {
        template    : './src/view/' + name + '.html',
        filename    : 'view/' + name + '.html',
        favicon     :'./favicon.ico',
        title       : title,
        inject      : true,
        hash        : true,
        chunks      : ['common', name]
    }
}
//webpack config
const config = {
    entry: {
        'common': ['./src/page/common/index.js'],
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js']
    },
    output: {
        path        : __dirname + '/dist',
        publicPath  : '/dist/',
        filename    : 'js/[name].js'
    },
    externals: {
        'jquery': 'window.jQuery'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use  : ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.(png|jpg|gif|svg|woff|eot|ttf|otf)\??.*$/, use: 'url-loader?limit=100&name=resource/[name].[ext]'
            },
        ]
    },
    /*devServer: {
        contentBase: './dist/index.html',
        port: 8088
    },*/
    resolve: {
        alias: {
            node_modules    : __dirname + '/node_modules',
            util            : __dirname + 'src/util',
            page            : __dirname + 'src/page',
            server          : __dirname + 'src/server',
            image           : __dirname + 'src/image'
        }
    },
    plugins: [
        //独立通用模块到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
           name: 'common',
           filename: 'js/base.js'
        }),
        //把css单独打包到文件里
        new ExtractTextPlugin('css/[name].css'),
        //html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
    ]
};
if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
module.exports = config;

common/index.js

'use strict';
require('./logout.css');
require('node_modules/font-awesome/css/font-awesome.min.css');
require('./footer/index.css');

标记的都是没加载的

Answer 1

Rosen 2018-02-03 19:59:27

如果只是部分样式无效，一般是两个原因

1. 打包编译的时候有报错，阻断了后面的样式打包，看命令行日志和浏览器里的console信息

2. 没有在对应的js里require样式文件

• 提问者 慕神8251567_君君 #1

  1.编译没任何错误 2.require都写了。估计是配置文件的锅！老师我把源码发群里，你有时间看下

• Rosen 回复 提问者 慕神8251567_君君 #2

  直接私信发我吧

• Rosen 回复 提问者 慕神8251567_君君 #3

  你的index和login两个页面里的js文件都是空的，没有引入通用组件的模块，只有在html里引入了通用部分的，所以样式加载不出来