按照教程上配置文件如下:
var webpack=require('webpack'); var HtmlwebpackPlugin=require('html-webpack-plugin'); var ExtractTextPlugin=require('extract-text-webpack-plugin'); var merge=require('webpack-merge'); var webpackBaseConfig=require('./webpack.config.js'); // 清空基本配置的插件列表 webpackBaseConfig.plugins=[]; module.exports=merge(webpackBaseConfig,{ output:{ publicPath:'/dist/', // 將入口文件重命名為帶有20位hash值得唯一文件 filename:'[name].[hash].js' }, plugins:[ new ExtractTextPlugin({ // 提取CSS,並重命名為帶有20為hash值得唯一文件 filename:'[name].[hash].css', allChunks:true }), // 定義當前node環境為生產環境 new webpack.DefinePlugin({ 'process.env':{ NODE_ENV:'"production"' } }), // 壓縮js new webpack.optimize.UglifyJsPlugin({ compress:{ warnings:false } }), // 提取模板,並保存入口html文件 new HtmlwebpackPlugin({ filename:'../index_prod.html', template:'./index.ejs', inject:false }) ] });
報錯:
原因:報錯的原因是webpack4已經升級不支持這種寫法了,也就是說不在plugins里面進行操作。而是放在了optimization里面,寫法不變下面貼代碼
解決方法:
運行 npm install --save-dev uglifyjs-webpack-plugin 安裝uglifyjsPlugin
修改配置如下:
...... const UglifyJsPlugin=require('uglifyjs-webpack-plugin'); // 清空基本配置的插件列表 webpackBaseConfig.plugins=[]; module.exports=merge(webpackBaseConfig,{ output:{ publicPath:'/dist/', // 將入口文件重命名為帶有20位hash值得唯一文件 filename:'[name].[hash].js' }, plugins:[ ...... ], optimization:{ minimizer:[ new UglifyJsPlugin({ uglifyOptions: { output: { comments: false }, compress: { warnings: false, drop_debugger: true, drop_console: true } } }) ] } });