не может заставить webpack работать с uglify

59
8

Я использую webpack, и он работал сладко до нескольких дней назад.

на 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

спросил(а) 2017-10-18T13:11:00+03:00 3 года назад
1
Решение
70

Если вы явно добавляете UglifyJSPlugin(), ваше использование флага -p является избыточным и, вероятно, вызывает конфликт, в котором происходит обнуление перед передачей ES6 (как punc() ваша punc()).

NODE_ENV=production webpack решение: просто используйте NODE_ENV=production webpack. Вы обнаруживаете переменную production среды в своей конфигурации и обрабатываете ее так, как хотите. Предоставление webpack делает свою собственную сборку, поверх которой, вероятно, срабатывает.

ответил(а) 2017-10-19T00:15:00+03:00 3 года назад
41

В то время как дядя Сыр дал половину ответа, вот другая половина:

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",

ответил(а) 2017-10-21T23:40:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема