我尝试过诸如Uglifyjs,babelli(babel-minify)之类的选项.似乎没有什么工作.Uglify会抛出这样的错误：
名称预期[au680.bundle.js：147541,22]
babelli也没有缩小代码.任何人都可以使用webpack 2,babel进行es6缩小的简单例子.
可能是一个干净利落地完成工作的插件.
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');
var appConfig= require('./config.js');
console.log("appConfig is ->>>",appConfig);
var appPort = appConfig.APP_PORT;//Port on which the application is running
process.noDeprecation = true;
var ASSET_PATH = '/'
module.exports = function(options) {
var entry,jsLoaders,plugins,cssLoaders,devtool;
console.log('options webconfig-->',options,'directory name',__dirname);
// If production is true
if (options.prod) {
console.log('production minification');
// Entry
entry = {
veris:path.resolve(__dirname,'./VerisInstrument/js/VerisApp.js'),au680 : path.resolve(__dirname,'./Au680Instrument/js/au680App.js'),commondashboard:path.resolve(__dirname,'./CommonDashboard/js/CommonDashboardApp.js'),groups:path.resolve(__dirname,'./Groups/js/GroupsApp.js'),homepage : path.resolve(__dirname,'./HomePage/js/HomePageApp.js'),infohealthcheck : path.resolve(__dirname,'./Common/js/infohealthcheckapp.js')
};
// Plugins
plugins = [// Plugins for Webpack
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),// new webpack.optimize.UglifyJsPlugin({minimize: true,comments : false,compress: {
// // remove warnings
// warnings: false,// // Drop console statements
// drop_console: true
// }})
// new es3MemberExpressionLiterals(),//
];
// If app is in development
} else {
devtool = 'source-map';
// Entry
// entry = [
// "webpack-dev-server/client?http://0.0.0.0:" + appPort,// Needed for hot reloading
// "webpack/hot/only-dev-server",// See above
// //path.resolve(__dirname,'./app') // Start with js/app.js...
// path.resolve(__dirname,'./VerisInstrument/js/VerisApp')
// ];
// require("babel-core").transform("code",{
// plugins: ["transform-object-rest-spread"]
// });
entry = {
main: [
"webpack-dev-server/client?http://0.0.0.0:" + appPort,// Needed for hot reloading
"webpack/hot/only-dev-server" // See above
],//path.resolve(__dirname,'./js/app') // Start with js/app.js...
veris : path.resolve(__dirname,'./VerisInstrument/js/VerisApp'),'./Common/js/infohealthcheckapp.js')
};
// Only plugin is the hot module replacement plugin
plugins = [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),}
}),new webpack.HotModuleReplacementPlugin()// Make hot loading work,]
}
return {
devtool: devtool,entry: entry,// output: { // Compile into js/build.js
// path: path.resolve(__dirname,'build'),// filename: "js/bundle.js",// publicPath : '/'
// },output: { // Compile into js/build.js
path: path.resolve(__dirname,filename: '[name].bundle.js',publicPath : ASSET_PATH
},module: {
rules: [
{
test: /\.js$/,// Transform all .js files required somewhere within an entry point...
loader: 'babel-loader',// ...with the specified loaders...
exclude: /node_modules/,options: {
presets: ['es2015','react','stage-2','env'],plugins: [require('babel-plugin-transform-object-rest-spread'),require('babel-plugin-transform-es2015-destructuring'),require('babel-plugin-transform-es2015-parameters')]
}
// query : {
// presets : ['es2015','env']
// }
},{
test: /\.css$/,// Transform all .css files required somewhere within an entry point...
use : [
{
loader : 'style-loader'
},{
loader : 'css-loader'
},{
loader : 'postcss-loader'
},{
loader: 'sass-loader'
}
] // ...with PostCSS
},{
test: /\.jpe?g$|\.gif$|\.png$/i,loader: "url-loader?limit=100000"
},{ test: /\.(woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000' }
]
},plugins: plugins,target: "web",// Make web variables accessible to webpack,e.g. window
stats: false,// Don't show stats in the console
node: {
fs: "empty"
}
}
}
解决方法
从
https://github.com/webpack/webpack/issues/2545开始：
The problem is that UglifyJS doesn’t support ES6 yet so it’s not possible to avoid that transformation yet. You can follow the progress at 07001 .
有很多解决方案;这是一对夫妇：
首先透明ES6代码,然后缩小它
为了获得最大的兼容性,使用Babel进行转换,然后使用Babel Minify(以前的Babili)缩小：
>安装babel-loader和babel-minify-webpack-plugin
npm install babel-loader babel-minify-webpack-plugin --save-dev
要么：
yarn add babel-loader babel-minify-webpack-plugin --dev
>将此添加到webpack.config.js：
const MinifyPlugin = require('babel-minify-webpack-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,use: {
loader: 'babel-loader',options: {
presets: ['env']
}
}
}
]
},plugins: [
new MinifyPlugin()
]
};
或者如果您愿意,可以使用UglifyJS代替Babel Minify：
const MinifyPlugin = require('uglifyjs-webpack-plugin');
无需转换即可缩小您的ES6代码
为了仅与支持您正在使用的ES6功能的浏览器兼容,请使用Babel Minify进行缩小而不进行转换：
>安装babel-minify-webpack-plugin
npm install babel-minify-webpack-plugin --save-dev
要么：
yarn add babel-minify-webpack-plugin --dev
>将此添加到webpack.config.js：
const MinifyPlugin = require('babel-minify-webpack-plugin');
module.exports = {
// ...
plugins: [
new MinifyPlugin()
]
};
Babel Minify的默认设置对我来说很好,但您可以在这里看到更多可以自定义的选项：https://github.com/webpack-contrib/babel-minify-webpack-plugin
