Javascript 在生产中,Webpack 2.2.0.rc-0将丑化/缩小vendor.js和manifest.js,而不是bundle.js
我试图弄明白为什么我的供应商和清单文件被缩小和丑陋,但我的捆绑包却不是。这可能是插件的顺序吗?也许和这个插件有关 这是我的UglifyJsPlugin代码:Javascript 在生产中,Webpack 2.2.0.rc-0将丑化/缩小vendor.js和manifest.js,而不是bundle.js,javascript,angularjs,node.js,reactjs,webpack,Javascript,Angularjs,Node.js,Reactjs,Webpack,我试图弄明白为什么我的供应商和清单文件被缩小和丑陋,但我的捆绑包却不是。这可能是插件的顺序吗?也许和这个插件有关 这是我的UglifyJsPlugin代码: new webpack.optimize.UglifyJsPlugin({ debug: false, minimize: true, sourceMap: false, output: { comments: false }, compress
new webpack.optimize.UglifyJsPlugin({
debug: false,
minimize: true,
sourceMap: false,
output: {
comments: false
},
compressor: { // eslint-disable-line camelcase
warnings: false,
unused: true,
dead_code: true
},
mangle: false
}),
这是我的网页配置对象,一个整体:
const webpack=需要“webpack”;
const conf=require'/gulp.conf';
常量路径=要求“路径”;
const del=要求“del”;
const CopyWebpackPlugin=需要“copy-webpack-plugin”;
const HtmlWebpackPlugin=require'html-webpack-plugin';
const ExtractTextPlugin=需要'extract-text-webpack-plugin';
const pkg=require'../package.json';
const autoprefixer=需要“autoprefixer”;
module.exports={
条目:{
捆绑包:`./${conf.path.src'index'}`,
供应商:`./src/app/dependencies`,
},
输出:{
路径:path.joinprocess.cwd,conf.paths.dist,
文件名:'[name].[chunkhash].js'
},
模块:{
规则:[
{
测试:/.json$/,,
用法:['json-loader']
},
{
测试:/.ts$/,,
排除:/node_模块/,
强制执行:“预”,
用法:['tslint-loader']
},
{
测试:/\.css|scss$/,,
使用:[
“样式加载器”,
“css加载程序”,
“sass loader”,
“邮政编码加载器”
]
},
{
测试:/\.js$/,,
排除:/node_模块/,
使用:[
“ng注释加载程序”,
“巴贝尔装载机”
]
},
{
测试:/\.ts$/,,
排除:/node_模块/,
用法:['ts-loader']
},
{
测试:/.html$/,,
用法:['html-loader']
},
{
测试:/\.jade|pug$/,,
用法:['pug-html-loader']
},
{
测试:/\.eot | woff | woff2 | ttf | svg | png | jpg$/,,
用法:['url-loader?limit=30000&name=[name]-[hash].[ext]']
},
{
测试:/\.减去$/,,
用法:['style-loader','css-loader','less-loader']
}
]
},
插件:[
新建webpack.optimize.UglifyJsPlugin{
调试:错误,
对,,
sourceMap:false,
输出:{
评论:错
},
压缩器:{//eslint禁用线路盒
警告:错误,
没有使用过:是的,
死亡代码:正确
},
马槽:错
},
新建webpack.optimize.commonChunkPlugin{
名称:[“供应商”、“清单”]
},
新建webpack.optimize.OccurrenceOrderPlugin,
//new webpack.NoErrorsPlugin,//如果存在任何错误,则不会向浏览器发送任何脚本
新HtmlWebpackPlugin{
模板:conf.path.src'index.html',
注:对
},
新建webpack.ContextReplacementPlugin
/角度\\\\\\\\\\\\\\\\\\\\\\\\\\\/src\\\\\\\\\\\\\/linker/,
conf.path.src
,
新的webpack.DefinePlugin{
'process.env.NODE_env':'production'
},
新ExtractTextPlugin'index-[contenthash].css',
新的webpack.LoaderOptionsPlugin{
选项:{
postcss:=>[autoprefixer],
决议:{},
ts:{
configFileName:'tsconfig.json'
},
tslint:{
配置:需要“../tslint.json”
}
}
},
新的CopyWebpackPlugin[{
from:path.joinconf.paths.src,'integration','embedder','embedder.js',
收件人:path.join'integration'、'embedder'、'embedder.js'
}]
],
决心:{
扩展:[
“.webpack.js”,
“.web.js”,
“.js”,
"ts"
]
}
}; 事实证明,答案是向babel loader添加一个选项配置,以包括预设es2015,如下所示:
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'ng-annotate-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
}
}
]
},
这是使用网页2丑化/缩小es6代码所必需的