The problem is that I am making a SAP application now, and webpack is configured to extract files. The style is neither extracted into a file nor packaged into js by webpack. Instead, the style tag is generated on the page. Ask God for guidance.
Using vue2, webpack2
webpack configuration:

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

If I comment this code, no error will be reported T_T

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

I don’t understand, please enlighten me