为什么Vue.js没有构建到生产版本?

时间:2018-12-24 12:23:27

标签: vue.js webpack

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

如何正确构建产品版本?

0 个答案:

没有答案