Maison > Questions et réponses > le corps du texte
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
三叔2017-07-05 10:51:17
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
})
])
}