Maison > Questions et réponses > le corps du texte
Voici la configuration de webpack
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require("clean-webpack-plugin")
const vendorCSS = new ExtractTextPlugin('css/vendor.css')
const appCSS = new ExtractTextPlugin('css/app.css')
module.exports = function() {
return {
entry: {
app: './main.js',
vender: ['vue']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
resolve:{
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.vue']
},
module:{
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
options: {
loaders: {
css: appCSS.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[ext]'
}
},
{
test: /\.css$/,
use: vendorCSS.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
})
},
]
},
devtool: (process.env.NODE_ENV === 'production') ? '#source-map' : false,
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
vendorCSS,
appCSS
]
}
}
if (process.env.NODE_ENV === 'development') {
module.exports.devServer = {
historyApiFallback: true,
hot: true,
inline: true
}
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.HotModuleReplacementPlugin()
])
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CleanWebpackPlugin(['dist'])
])
}
Après avoir exécuté la commande npm run dev, localhost:8080 a bien été ouvert, et il n'y a eu aucune erreur de compilation, mais l'interface suivante est rapidement apparue,
Ce qui suit est le répertoire de démonstration. Je veux juste compiler app.vue sans utiliser le routage. Je veux savoir pourquoi la connexion directe est anormale. Est-ce dû à la configuration ou à d'autres raisons.