package.json:
"build-prod": "webpack --colors -p --mode production --config webpack.config.js",
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
mode: 'production',
entry: [
'./src/main.js',
'./src/common/styles/index.scss'
],
output: {
path: path.resolve(__dirname, 'dist_prod'),
filename: 'bundle.js',
publicPath: "/"
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
},
module: {
rules: [{
test: /\.(html)$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
collapseWhitespace: true
}
},
}, {
test: /\.(png|jpg|ttf|otf|svg)$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'loadable/'
}
}
}, {
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: 'env',
plugins: [
'transform-vue-jsx',
'babel-plugin-syntax-dynamic-import'
]
}
}
}, {
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: false,
minimize: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: false,
minimize: true
}
}]
})
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
minify: true
}),
new CopyWebpackPlugin([{
from: './src/loadable',
to: './loadable'
}]),
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true,
})
]
};
构建成功,没有错误,但是Vue版本仍然是dev。 在控制台中:
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
如何正确构建产品版本?