代码之家  ›  专栏  ›  技术社区  ›  user8685433

如果提供包,则样式加载器不工作

  •  0
  • user8685433  · 技术社区  · 8 年前

    如果我使用的是dev模式,那么样式加载器可以正常工作。但当我构建项目并且有dist文件夹时,我看不到 style 标记入 head 标签有趣的是,只有在 bundle.js 文件显示在 dist .

    我的配置:

    const path = require('path')
    const webpack = require('webpack')
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    
    const extractSASS = new ExtractTextPlugin({
      filename: './css/[name].css',
      allChunks: true
    });
    
    var entry = [
      'babel-polyfill',
      './src/index.js'
    ]
    
    var output = {
      path: path.join(__dirname, 'dist'),
      filename: 'js/bundle.js',
      publicPath:'/static/'
    }
    
    var rules = [
      {
        use: 'babel-loader',
        include: __dirname,
        exclude:[
          path.resolve(__dirname, "node_modules"),
        ],
        test: /\.js$/
      },
      {
        test: /\.(scss|css)$/,
        use: process.env.NODE_ENV == 'production'
          ? extractSASS.extract({
            fallback: 'style-loader',
            use: ['css-loader','sass-loader']
          })
          : [ 'style-loader', 'css-loader', 'sass-loader']
      }
    ]
    
    if(process.env.NODE_ENV != 'production') entry.push('webpack-hot-middleware/client')
    
    const dev = {
      devtool: 'cheap-module-eval-source-map',
      entry: entry,
      output: output,
      plugins: [
        extractSASS,
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()
      ],
      module: {
        rules: rules
      }
    }
    
    const prod = {
      entry: entry,
      output: output,
      plugins: [
        extractSASS,
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new CopyWebpackPlugin([{from:'src/img', to:'img'}]),
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
      ],
      module: {
        rules: rules
      }
    }
    
    module.exports = process.env.NODE_ENV == 'production' ? prod : dev;
    

    有人知道什么会导致问题吗?谢谢

    1 回复  |  直到 8 年前
        1
  •  0
  •   user8685433    8 年前

    问题出在HMR中。正如您在配置中看到的,在生产中我们不使用HMR。因此,当我们的包被创建时,我们的标记将获取这个包。这个捆绑包对sass中的更改没有任何概念(因为它不包含hmr内容),因此,我们无法在头脑中看到样式标记。 解决方案是在以开发模式运行之前删除捆绑包。