Heim > Fragen und Antworten > Hauptteil
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
三叔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
})
])
}