Minify a package using webpack2
Is it possible to minify my package file and all modules used. I am using import in javascript, but want webpack to minify all imported js files. This means removing all unused code from imported external libraries. It is possible. Especially plot is a really big library, but I only use pie charts. I don't think my package requires all the code from the conspiracy. Here is my webpack config file:
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry:
{
cash: './js/page/cash.js'
},
output:
{
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist')
},
resolve:
{
modules: [
path.resolve(__dirname, 'js')
],
alias : {
knockout: path.resolve(__dirname, 'js/knockout-3.4.2.js'),
moment: path.resolve(__dirname,'js/moment.js')
}
},
module:
{
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new UglifyJSPlugin({
comments: false,
sourceMap: false,
compress: {
unused: true,
dead_code: true,
warnings: false,
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true,
sequences: true,
booleans: true
},
mangle: true
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin()
]
};
module.exports = config;
+3
source to share
1 answer
The best way to do this is to selectively import the elements (functions) you need with ES6 syntax import
. The Webpack documentation describes how to do this. If you do this, Webpack will automatically perform Tree Building.
+2
source to share