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');
标记的都是没加载的
写回答
1回答
-
Rosen
2018-02-03
如果只是部分样式无效,一般是两个原因
打包编译的时候有报错,阻断了后面的样式打包,看命令行日志和浏览器里的console信息
没有在对应的js里require样式文件
032018-02-03
相似问题