javascript - Comment extraire des styles dans un fichier séparé dans une application Vue monopage?

Question

Le problème est que je crée actuellement une application SAP et que Webpack est configuré pour extraire des fichiers. Le style n'est ni extrait dans un fichier ni empaqueté dans js par webpack. Au lieu de cela, la balise de style est générée sur la page. Demandez à Dieu de vous guider.
Utilisation de vue2, webpack2
configuration du webpack :

var path = require('path')
var vuxLoader = require("vux-loader");
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");



const webpackConfig = {

  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              '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: /iview.src.*?js$/, loader: 'babel' },
      {
          test: /\.css$/,
          use:new ExtractTextPlugin({
              filename:'build.css',
              ignoreOrder:true
          }).extract({
            use:{
              loader:'css-loader',
              options:{
                modules:true
              }
            },
            fallback:'style-loader'
          })
      },
      {
          test: /\.less$/,
          loader:'style-loader!css-loader!less-loader'
      },
      {
          test: /\.(eot|woff|woff2|ttf)$/,
          loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
      }
    ]
  },
  vue:{
    loaders :{
      css: ExtractTextPlugin.extract({fallback:'style-loader', use:'css-loader'})
    }
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
};

module.exports = vuxLoader.merge(webpackConfig, {plugins:['vux-ui']});

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({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

package.json :

{
  "name": "blog",
  "description": "leung blog mobile",
  "version": "1.0.0",
  "author": "leung",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8082",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "axios": "^0.16.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.1.4",
    "vue-router": "^2.3.1",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.2.1",
    "vux": "^2.2.1-rc.5",
    "vux-loader": "^1.0.57",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

Si je commente ce code, aucune erreur ne sera signalée T_T

vue:{
    loaders :{
      css: ExtractTextPlugin.extract({fallback:'style-loader', use:'css-loader'})
    }
  },

Je ne comprends pas, éclairez-moi s'il vous plaît

Answer 1

L'exemple suivant est pour votre référence, j'espère qu'il vous sera utile

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

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['vue', 'vue-router','vuex']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'js/build.js'
  },
  module: {
    rules: [{
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            loaders: {
              css: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'vue-style-loader'
              })
            },
          }
        }]
      },
      {
        test: /\.(js|jsx)$/,
        use: [{
          loader: 'babel-loader',
        }],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'images/[name].[ext]'
          }
        }]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'js/vendor.min.js',
    }),
    new ExtractTextPlugin("css/style.css"),
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    stats: "errors-only",
    port: 9000,
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}