Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Wie extrahiere ich Stile in eine separate Datei in einer Vue-Einzelseitenanwendung?

Das Problem ist, dass ich gerade eine SAP-Anwendung erstelle und das Webpack zum Extrahieren von Dateien konfiguriert ist. Der Stil wird vom Webpack weder in eine Datei extrahiert noch in js gepackt. Stattdessen wird der Stil-Tag auf der Seite generiert. Bitten Sie Gott um Führung.
Verwenden von vue2, webpack2
Webpack-Konfiguration:

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"
  }
}

Wenn ich diesen Code kommentiere, wird kein Fehler gemeldet T_T

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

Ich verstehe es nicht, bitte klären Sie mich auf

伊谢尔伦伊谢尔伦2685 Tage vor901

Antworte allen(1)Ich werde antworten

  • 三叔

    三叔2017-07-05 10:51:17

    下面这个例子给你参考,希望对你有帮助

    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
        })
      ])
    }
    

    Antwort
    0
  • StornierenAntwort