不能让webpack与uglify一起工作

时间：2017-10-18 10:11:51

标签： webpack silverstripe webpack-2 uglifyjs

我使用webpack，它在几天前工作得很好。

on npm run build我收到了错误消息 npm run dev和 npm run watch 工作得很好。

ERROR in bundle.js from UglifyJs
Unexpected token: punc (() [bundle.js:20892,36]

ERROR in bundle.js from UglifyJs
Unexpected token: punc (() [bundle.js:20892,36]

我使用以下webpack设置：

的package.json：

{
  "name": "ss-webpack",
  "version": "1.0.0",
  "description": "A silverstripe theme setup using webpack to bundle assets and provide a front end build system. ",
  "main": "index.js",
  "scripts": {
    "watch": "NODE_ENV=development webpack-dashboard -- webpack-dev-server",
    "dev": "NODE_ENV=development webpack",
    "build": "NODE_ENV=production webpack -p --progress"
  },
  "author": "Sunny Side Up",
  "license": "tba",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.24.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.8.0",
    "eslint-loader": "^1.9.0",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.4.2",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "postcss": "^6.0.13",
    "postcss-loader": "^2.0.6",
    "postcss-reporter": "^4.0.0",
    "postcss-scss": "^1.0.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "stylelint": "^7.13.0",
    "svg-inline-loader": "^0.7.1",
    "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "exports-loader": "^0.6.4",
    "script-loader": "^0.7.2"
  }
}

webpack.config.babel.js：

/*
 Webpack Config!
 Original version: Andrew Haine
*/

/*
    Imports
*/

import webpack from 'webpack';
import path from 'path';
import DashboardPlugin from 'webpack-dashboard/plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import variables from './../webpack-variables';

/*
    Useful constants
*/

const SITE_NAME = variables.devWebAddress;
const THEME_NAME = variables.themeName;
const DISTRIBUTION_FOLDER = variables.distributionFolder;

/*
    Plugin configuration
*/

//different css points
const extractEditor = new ExtractTextPlugin({
    filename: 'editor.css',
});
const extractMain = new ExtractTextPlugin({
    filename: 'style.css',
});

//define plugins
let plugins = [];

const IS_PROD = process.env.NODE_ENV === 'production';

if(IS_PROD) {
    plugins.push(
        new webpack.optimize.UglifyJsPlugin(),
        extractEditor,
        extractMain
    );


//development
} else {
    plugins.push(
        //auto updating on dev server
        new webpack.HotModuleReplacementPlugin(),
        //shows relative path in HotModuleReplacement
        new webpack.NamedModulesPlugin(),
        //sexy dashboard
        new DashboardPlugin(),
        extractEditor
    );
}

plugins.push(new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
}))

const sources = [
    `../${THEME_NAME}/src`,
    `../${THEME_NAME}_mysite/src`
];

const sassFolders = sources.map((source) => path.resolve(source, "scss"))
    .concat(sources.map((source) => path.resolve(source, "sass")));

//HMR can be fixed by using basic loaders instead of textExtract
const sassLoaderExtract =    {
    fallback: 'style-loader',
    use: [
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        },
    ]
}

const styleLoaders = [{
    //basic css
    test: /\.css/i,
    use: ['style-loader', 'css-loader']
}, {
    //main styles
    test: /[^editor].\.s(a|c)ss$/i,
    include: sassFolders,
    use: extractMain.extract(sassLoaderExtract)
}, {
    //styles for editor
    test: /editor\.s(a|c)ss/i,
    include: sassFolders,
    use: extractEditor.extract(sassLoaderExtract)
}];

var jsLoaders = [
    // KEEP THE CODE BELOW AND TURN ON IF NEEDED....
    // {
    //     //eslint check
    //     enforce: 'pre',
    //     test: /\.js$/i,
    //     exclude: /node_modules/,
    //     use: {
    //         loader: 'eslint-loader'
    //     }
    // },
    {
        //js compilation
        test: /\.js$/i,
        include: sources.map((source) => path.resolve(source, "src")),
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true,
                presets: [require.resolve("babel-preset-es2015")]
            }
        }
    }
];

if(IS_PROD) {

    jsLoaders.push(
        {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        }
    );
}

const imageLoaders = [
    {
        test: /\.(png|jpg|gif)$/i,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 30000
                }
            },
            {
                loader: 'image-webpack-loader',
                options: {
                    optipng: {
                        optimizationLevel: 5
                    },
                    mozjpeg: {
                        interlaced: true,
                    }
                }
            }
        ]
    },
    {
        test: /\.svg$/i,
        use: 'svg-inline-loader'
    }
];

/*
    Main Config Object
*/
export default {
    //what files to start from
    //bundle should include main.js from all sources
    entry: path.resolve(`../${THEME_NAME}_mysite/src`, "main.js"),
    //access from client
    output: {
        path: path.resolve(`../${DISTRIBUTION_FOLDER}/`, ''),
        publicPath: `/themes/${DISTRIBUTION_FOLDER}/`,
        filename: 'bundle.js'
    },
    //loaders
    module: {
        rules: styleLoaders.concat(jsLoaders).concat(imageLoaders)
    },
    //extra settings
    resolve: {
        modules: [
            path.join(__dirname, "node_modules"),
            path.resolve(`../${THEME_NAME}_node_modules/node_modules`),
            path.resolve(`../${THEME_NAME}_mysite/node_modules/`)
        ],
        alias: {
            site: path.resolve(`./../../`),
            base: path.resolve(`../${THEME_NAME}/src/`),
            mysite: path.resolve(`../${THEME_NAME}_mysite/src/`),
            'jquery': 'jquery/dist/jquery',
            'jQuery': 'jquery/dist/jquery'
        },
        extensions: [".js", ".jsx"]
    },
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        hot: true,
        port: 3000,
        publicPath: `/themes/${DISTRIBUTION_FOLDER}/`,
        proxy: {
            '/': {
                'target': {
                    'host': `${SITE_NAME}`,
                    'protocol': 'http',
                    'port': 80
                },
                changeOrigin: true,
                secure: false
            }
        },
        stats: 'errors-only'
    },
    plugins: plugins
};

``` 完整的包装可以在这里找到：

https://github.com/sunnysideup/silverstripe-sswebpack_engine_only 我希望能够无错误地运行npm run build

我的环境：

节点版本：8.0.0

npm版本：5.5.1

ubuntu 16.04

cms：silverstripe

2 个答案:

答案 0 :(得分：3)

如果您明确添加UglifyJSPlugin()，则使用-p标志是多余的，并且可能会导致在ES6转换之前发生uglification的冲突（作为您的{{1}错误表明）。

可能的解决方案：只需使用punc()即可。您正在检测配置中的NODE_ENV=production webpack环境变量，并按照您希望的方式处理它。让webpack在它之上做自己的生产构建可能会让事情变得蠢蠢欲动。

答案 1 :(得分：0)

虽然奶酪叔叔提供了一半的答案，但这是另一半：

webpack.config.babel.js，改为： ... 

plugins.push(
    new webpack.optimize.UglifyJsPlugin(),
);

到

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

plugins.push(
    new UglifyJSPlugin(),
);

修复它......是的 - 谢谢！

以下是我现在在package.json中使用的内容：

"uglifyjs-webpack-plugin": "^1.0.0-beta.3",
相关问题
最新问题