build里面没有css文件

Question

webpack.production.config.js文件是这样的，跟课程最后升级为webpack3,router4后视频里的一样。

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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

var path=require('path'); var webpack=require('webpack'); var HtmlWebpackPlugin=require('html-webpack-plugin'); var ExtractTextPlugin=require('extract-text-webpack-plugin');   module.exports={     //devtool:'eval-source-map',     entry: {         app:path.resolve(__dirname,'app/index.jsx'),         vendor:[ //将 第三方依赖 单独打包             'react',             'react-dom',             'react-redux',             'react-router',             'redux',             'es6-promise',             'whatwg-fetch'           ]     },       output:{         path:__dirname+'/build',         filename:"[name].[chunkhash:8].js",         publicPath:'/'     },       resolve:{         extensions:['.js','.jsx']     },       module:{         rules:[             {                 test:/\.(js|jsx)$/,                 exclude:path.resolve(__dirname,"node_modules/"),                 loader:'babel-loader',                 query:{                     presets:['es2015','react']                 }             },               {                 test:/\.(less|css)?$/ ,                 exclude:path.resolve(__dirname,"node_modules/"),                 use:[                           'style-loader'                     ,                     {                         loader:'css-loader',                         options:{                             importLoaders:1                         }                     },                       'postcss-loader',                     'less-loader'                     ]             },                 {                 test:/\.(png|gif|jpg|jpeg|bmp)$/i,                 exclude:path.resolve(__dirname,"node_modules/"),                 loader:'file-loader',                 options:{                     name:'img/[name].[ext]'                 }             },               {                 test:/\.(png|woff|woff2|ttf|eot)($|\?)/i,                 exclude:path.resolve(__dirname,"node_modules/"),                 loader:'file-loader',                 options:{                     name:'fonts/[name].[ext]'                 }             }             ]       },               plugins:[         // webpack 内置的 banner-plugin         new webpack.BannerPlugin("Copyright by [e-mail]."),           //html模板插件         new HtmlWebpackPlugin({             template:__dirname+'/app/index.tmpl.html'         }),         // 定义为生产环境，编译 React 时压缩到最小         new webpack.DefinePlugin({             'process.env':{                 'NODE_ENV': JSON.stringify(process.env.NODE_ENV)             }         }),           new webpack.optimize.UglifyJsPlugin({             compress:{                 warnings:false            }         }),           //分离CSS和JS文件         new ExtractTextPlugin('[name].[hash:8].css'),           //提供公共代码         new webpack.optimize.CommonsChunkPlugin({             name:'vendor',             filename:'[name].[hash:8].js'         }),             //可在业务js代码中使用__DEV__判断是否是dev模式(dev模式下可以提示错误,测试报告等,production模式不提示)         new webpack.DefinePlugin({             __DEV__:JSON.stringify(JSON.parse((process.env.NODE_ENV=='dev')||'false'))         }),           //LoaderOptionPlugin插件         new webpack.LoaderOptionsPlugin({             options: {                 postcss: function() {                     return [                         require('autoprefixer')({                             browsers: ['last 5 versions']                         })                     ]                 }             }         })     ],       devServer:{         proxy:{             //凡是'/api'开头的http请求，都会被代理到             //localhost:3000上，由于koa提供mock数据             //koa代码在'./mock'目录中，启动命令为npm run mock             '/api':{                 target:'http://localhost:3000',                 secure:false             }         },         contentBase:'./public',//本地服务器所加载的页面所在的目录         // colors:true,//终端输出结果为彩色         historyApiFallback:true,//不跳转         inline:true,//实时刷新         hot:true//使用热加载插件HotModuleReplacementPlugin     }

Answer 1

双越 2017-11-23 11:25:19

跟 webstorm 没关系。你先不过要管 504 的问题，先把 404 的问题解决。意思就是：你页面加载的 css js 文件的地址不对，没有请求到。按照这个提示，你再去查一下自己修改的地方，是否和这个有关。

Answer 2

提问者 xy36 2017-11-22 17:56:41

webpack.production.config.js文件为

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

module.exports={
   //devtool:'eval-source-map',
   entry: {
       app:path.resolve(__dirname,'app/index.jsx'),
       vendor:[ //将 第三方依赖 单独打包
           'react',
           'react-dom',
           'react-redux',
           'react-router',
           'react-router-dom',
           'redux',
           'es6-promise',
           'whatwg-fetch'

       ]
   },

   output:{
       path:__dirname+'/build',
       filename:"[name].[hash:8].js",
       publicPath:'/'
   },

   resolve:{
       extensions:['.js','.jsx']
   },

   module:{
       rules:[
           {
               test:/\.(js|jsx)$/,
               exclude:/node_modules/,
               loader:'babel-loader',
               query:{
                   presets:['es2015','react']
               }
           },

           {
               test:/\.(less|css)?$/ ,
               exclude:/node_modules/,
               use:ExtractTextPlugin.extract({
                   fallback:'style-loader',
                   use:'css-loader!less-loader'
               })
           },


           {
               test:/\.(jpg|jpeg|gif|bmp|png)$/i,
               exclude:/node_modules/,
               loader:'file-loader',
               options:{
                   name:'img/[name].[ext]'
               }
           },

           {
               test:/\.(woff|woff2|ttf|eot)($|\?)/i,
               exclude:/node_modules/,
               loader:'file-loader',
               options:{
                   name:'fonts/[name].[ext]'
               }
           }


       ]

   },





   plugins:[
       // webpack 内置的 banner-plugin
       new webpack.BannerPlugin("Copyright by [e-mail]."),

       //html模板插件
       new HtmlWebpackPlugin({
           template:__dirname+'/app/index.tmpl.html'
       }),
       // 定义为生产环境，编译 React 时压缩到最小
       new webpack.DefinePlugin({
           'process.env':{
               'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
           }
       }),

       new webpack.optimize.UglifyJsPlugin({
           compress:{
               warnings:false
          }
       }),

       //分离CSS和JS文件
       new ExtractTextPlugin('[name].[hash:8].css'),

       //提供公共代码
       new webpack.optimize.CommonsChunkPlugin({
           name:'vendor',
           filename:'[name].[hash:8].js'
       }),


       //可在业务js代码中使用__DEV__判断是否是dev模式(dev模式下可以提示错误,测试报告等,production模式不提示)
       new webpack.DefinePlugin({
           __DEV__:JSON.stringify(JSON.parse((process.env.NODE_ENV=='dev')||'false'))
       }),

       //LoaderOptionPlugin插件
      /** new webpack.LoaderOptionsPlugin({
           options: {
               postcss: function() {
                   return [
                       require('autoprefixer')({
                           browsers: ['last 5 versions']
                       })
                   ]
               }
           }
       })**/
   ],

   devServer:{
       proxy:{
           //凡是'/api'开头的http请求，都会被代理到
           //localhost:3000上，由于koa提供mock数据
           //koa代码在'./mock'目录中，启动命令为npm run mock
           '/api':{
               target:'http://localhost:3000',
               secure:false
           }
       },
       contentBase:'./public',//本地服务器所加载的页面所在的目录
       // colors:true,//终端输出结果为彩色
       historyApiFallback:true,//不跳转
       inline:true,//实时刷新
       hot:true//使用热加载插件HotModuleReplacementPlugin
   }

}

Answer 3

提问者 xy36 2017-11-22 10:48:20

build/index.html文件为空白页，报错如下

• 双越 #1

  页面截图给我，另外看看有没有JS报错

• 提问者 xy36 回复 双越 #2

  build/index.html页面为空白页，console控制台信息如下
  屏幕快照 2017-11-22 下午5.35.49

• 双越 回复 提问者 xy36 #3

  看你截图信息，css js 文件都 404 了，没请求到

点开查看后面5条评论