javascript - webpack 打包 vue 壓縮 js程式碼時報錯

Question

'use strict'
const webpack = require('webpack')
const paths = require('./paths')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry: paths.appEntry,
    output: {
        pathinfo: true,
        path: paths.appBuild,
        filename: '[name].[hash].js'
    },
    bail: true,
    devtool: 'source-map',
    resolve: {
        extensions: [
            '.js', '.vue', '.scss', '.css', '.json'
        ],
        alias: {
            'src': paths.appSrc
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    extract: true,
                    loaders: ExtractTextPlugin.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    minimize: true,
                                    sourcMap: true
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    indentedSyntax: true,
                                    sourcMap: true
                                }
                            }
                        ],
                        fallback: 'vue-style-loader'
                    })
                }
            }, {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(process.env.NODE_ENV === 'prod')
        }),
        new HtmlWebpackPlugin({
            inject: true,
            template: paths.appHtml,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                comparisons: false
            },
            output: {
                comments: false
            },
            sourceMap: true
        }),
        new OptimizeCSSPlugin({
            cssProcessorOptions: {
                safe: true
            }
        }),
        new ExtractTextPlugin({filename: '[name].[contenthash:8].css'}),
        new ManifestPlugin({fileName: 'asset-manifest.json'}),
        new CopyWebpackPlugin([
            {
                from: paths.appPublic,
                to: paths.appBuild,
                ignore: ['.*']
            }
        ])
    ]
}

#報錯原因 好像是 uglifyjs 外掛不認識 es6語法

##另外 我的 css 沒有獨立打包成 css 檔案仍和 js 揉在一起的。 。 。
謝謝各位大俠幫忙看看。

Answer 1

你的 babel 配置是正確的。在這種情況下，一個常見的可能是，你的專案根目錄下遺漏了 .babelrc 文件，因而使得 babel 沒有對 ES6 做轉譯，導致 Uglify 失敗。

追加如下內容的 .babelrc 到專案根目錄即可：

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}