Verkleinerung für die ES6-code in webpack mit babel
Habe ich versucht Optionen wie Uglifyjs,babelli (babel-minifizieren ).nichts scheint zu funktionieren.Verunstalten wirft eine Fehlermeldung wie diese:
Namen erwartet [au680.bundle.js:147541,22]
babelli nicht minimiert den code entweder.Kann jeder ein einfaches Beispiel geben von es6 Verkleinerung nutzen webpack 2, babel.
Kann ein plugin, dass die Arbeit nicht sauber.
JS:
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'),
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')
};
//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, 'build'),
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','react','stage-2','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"
}
}
}
- Haben Sie versucht, die
UglifyJsPlugin
? Haben Sie Sie sicher, dass Ihr code hat keine Fehler? - Folgende Fehlermeldung kommt wenn man versucht, UglifyJsPlugin FEHLER in au680.bundle.js von UglifyJs Namen erwartet [au680.bundle.js:147540,22] webpack: Fehler beim kompilieren.
- Anwendung läuft aber ich sehe keine Verkleinerung geschieht, und sehen auch Fehler in der CLI
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vom https://github.com/webpack/webpack/issues/2545:
Gibt es viele Lösungen, hier sind ein paar:
Transpile Ihre ES6-code zuerst, dann verkleinern Sie es
Für maximale Kompatibilität, transpile mit Babel und dann verkleinern mit Babel minifizieren (ehemals Babili):
Installieren babel-loader und babel-verkleinern-webpack-plugin
Oder:
Hinzufügen webpack.config.js:
Oder wenn Sie bevorzugen, können Sie UglifyJS statt Babel minifizieren:
Verkleinern Ihre ES6-code ohne transpiling
Für die Kompatibilität nur mit Browsern, die Unterstützung der ES6-features, die Sie verwenden, verkleinern mit Babel verkleinern ohne transpiling:
Installieren babel-verkleinern-webpack-plugin
Oder:
Hinzufügen webpack.config.js:
Die Standard-Einstellungen für Babel verkleinern funktionierte gut für mich, aber sehen Sie hier weitere Optionen, die Sie anpassen können: https://github.com/webpack-contrib/babel-minify-webpack-plugin
Folgenden ist mein webpack-Konfigurationen-Datei. Ich bin mit webpack 2.3.1 mit dynamischen routing-reagieren-router. Hoffe es hilft dir.