ExtractTextPlugin只能加载部分css文件

来源:4-10 通用header开发

慕神8251567_君君

2018-02-03

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');

//img.mukewang.com/szimg/5a759ff3000170a504540496.jpg

标记的都是没加载的http://img.mukewang.com/szimg/5a75a1140001f19725540578.jpg

写回答

1回答

Rosen

2018-02-03

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

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

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

0
3
Rosen
回复
慕神8251567_君君
你的index和login两个页面里的js文件都是空的,没有引入通用组件的模块,只有在html里引入了通用部分的,所以样式加载不出来
2018-02-03
共3条回复

真实数据对接 从0开发前后端分离的企业级上线项目

【毕设项目精品】前端实战,对接真实服务端数据,开发完整项目

4262 学习 · 4113 问题

查看课程