我想连接包含我的 angularjs 代码的 js 文件列表并对其进行 uglify。我想以有序的方式连接它以避免“that .... is not defined”错误。
我还从 github 下载了一些库并放在“lib”文件夹中。我想在 vendor.bundle.js 中连接这些库。
这是文件夹结构:
/app
/feature1
feature1.controller.js
/feature2
feature2.controller.js
/...
app.module.js
/libs
/angular
angular.min.js
/angular-ui-router
angular-ui-router.min.js
/angular-material
angular-material.min.js
angular-material.min.css
/...
app.js
vendor.js
在 app.js 里面我有这个:
require('./app/app.module.js');
require('./app/feature1/feature1.controller.js');
require('./app/feature2/feature2.controller.js');
...
在 vendor.js 里面我有这个:
require('./libs/angular/angular.min.js');
require('./libs/angular-ui-router/angular-ui-router.min.js');
require('./libs/angular-material/angular-material.min.js');
require('./libs/angular-material/angular-material.min.css');
...
这是 webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
app: "./app.js",
vendor: "./vendor.js",
},
output: {
path: path.resolve(__dirname, "app"),
filename: "app.bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename:"./app/vendor.bundle.js"
}),
new UglifyJSPlugin({
compress: true,
sourceMap: false,
mangle: true
})
]
};
此配置的结果是 app.bundle.js 中的连接未排序，因此存在未定义的函数等...
并且 vendor.bundle.js 没有创建，因为它会产生很多错误。
使用拆分的个人代码和 vendor 代码进行缩小的正确方法是什么？
最佳答案
您是否尝试过使用命令 wepack -p 在 native 执行此操作？
如果它不起作用，您可以尝试将 Uglify 修改为:
new UglifyJSPlugin({
compress: true,
sourceMap: false,
mangle: false // modified
})
关于javascript - 使用 AngularJS 和 Webpack 2 进行缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43386731/