Webpack CSS未在生产环境中呈现

时间:2018-02-02 20:02:30

标签: webpack vue.js webpack-dev-server webpack-2

我使用Webpack bundler创建了一个Vuejs项目。一切正常,因为它将CSS注入<style>标签。但出于某种原因,一旦我执行npm run build,其中包含以下命令cross-env NODE_ENV=production webpack --progress --hide-modules,它就会以某种方式呈现在dist/文件夹中为生产而生成的CSS文件环境。

我有各自的加载器来编译我的SASS文件到CSS以便在开发环境中进行渲染。

这是我的webpack配置文件(对于冗长的文件道歉):

var path = require('path')
var webpack = require('webpack')

var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')

var plugins = [
    new HtmlWebpackPlugin({
      title: "TRIIIO",
      inject: false,
      template: path.resolve(__dirname, 'index.html'),
      favicon: path.resolve(__dirname, 'src/assets/images/favicon.png')
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV:  JSON.stringify(process.env.NODE_ENV || 'development')
      }
    }),
    new ExtractTextPlugin({
        filename: '[name].css',
        disable: process.env.NODE_ENV === "development"
    }),
    new CopyWebpackPlugin([
      { from: 'src/assets', to: 'src/assets' }
    ]),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]

function resolve (dir) {
  return path.join(__dirname, '../', dir)
}

module.exports = {
  entry: {
    application: [
      './src/main.js',
      './src/assets/styles/style.scss'
    ]
  },
  output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
  },
  node: {
    fs: "empty",
    tls: "empty",
    net: "empty"
   },
   plugins: plugins,
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            // vue-loader options go here
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      { 
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "css-loader"
            },
            {
              loader: "sass-loader"
            }
          ],
          fallback: "style-loader"
        })
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
            name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(otf|eot|ttf|woff)$/,
        loader: `file-loader?name=[name].[ext]?[hash]`
      },
      {
        test: /\.(json)$/,
        loader: 'json-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss', '.html'],
    // modules: [path.resolve(__dirname, './node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      '@': resolve('src')
    }
  },
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

我不确定配置文件出错的地方让我不能在生产中正确呈现CSS文件。

0 个答案:

没有答案