这是我的webpack.config.js
webpack.config.js
var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename: "bundle.min.js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({minimize: true}) ] };
我正在建造
$ webpack
在我的dist文件夹中,我只得到
dist
bundle.min.js
bundle.min.js.map
我也想看看未压缩的bundle.js
bundle.js
webpack.config.js :
const webpack = require("webpack"); module.exports = { entry: { "bundle": "./entry.js", "bundle.min": "./entry.js", }, devtool: "source-map", output: { path: "./dist", filename: "[name].js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({ include: /\.min\.js$/, minimize: true }) ] };
自 Webpack 4 以来,webpack.optimize.UglifyJsPlugin已弃用,并且使用它会导致错误:
webpack.optimize.UglifyJsPlugin
webpack.optimize.UglifyJsPlugin 已被移除,请改用 config.optimization.minimize
正如手册所解释的,插件可以替换为minimize选项。可以通过指定UglifyJsPlugin实例向插件提供自定义配置:
minimize
UglifyJsPlugin
const webpack = require("webpack"); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { // ... optimization: { minimize: true, minimizer: [new UglifyJsPlugin({ include: /\.min\.js$/ })] } };
这完成了简单设置的工作。更有效的解决方案是将 Gulp 与 Webpack 一起使用,并一次性完成相同的操作。