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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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

1 2 3 4

'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里引入了通用部分的，所以样式加载不出来