webpack打包相关问题

1 解决webpack打包后js,css,html压缩问题,影响开发:

修改webpack.prod.conf.js文件中如下配置项:

// HTML压缩工具
const HtmlWebpackPlugin = require('html-webpack-plugin')
// CSS压缩工具
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// JS压缩工具
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//将minify下的值修改为false
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
	removeComments: false, // 改为false
	collapseWhitespace: false, // 改为false
	removeAttributeQuotes: false // 改为false
	// more options:
	// https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),
//css 压缩代码,将下面代码注释掉/* */
new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
	? { safe: true, map: { inline: false } }
	: { safe: true }
}),
//压缩js代码,将下面代码注释掉/* */
new UglifyJsPlugin({
  uglifyOptions: {
	compress: {
	  warnings: false
	}
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
}),
new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      // 打包的时候移除console  ^_^
      drop_debugger: true, // 移除debugger
      drop_console: true, // 移除console
      pure_funcs: ['console.log','console.info']
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})

2 打包路径配置

// Template for index.html 打包后放置的位置
index: path.resolve(__dirname, '../lcfMall/index.html'),
// Paths 打包后文件放置的位置
assetsRoot: path.resolve(__dirname, '../lcfMall'),
// 除index.html文件外 其他文件的存放位置
assetsSubDirectory: 'static',
// index.html文件中 引入资源文件时,路径前面要加上的公共部分
assetsPublicPath: '/lcfMall/',
// Template for index.html 打包后放置的位置
index: path.resolve(__dirname, 'D://data/lcfMall/index.html'),
// Paths 打包后文件放置的位置
assetsRoot: path.resolve(__dirname, 'D://data/lcfMall'),
// 除index.html文件外 其他文件的存放位置
assetsSubDirectory: 'static',
// index.html文件中 引入资源文件时,路径前面要加上的公共部分
assetsPublicPath: '/lcfMall/',

3 core-js版本太高build异常

ERROR  Failed to compile with 62 errors                                                                        14:18:40
These dependencies were not found:

* core-js/modules/es6.array.find in ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.2.2@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.8@vue-loader/lib??vue-loader-options!./src/components/main/main.vue?vue&type=script&lang=js&
* core-js/modules/es6.array.find-index in ./src/libs/util.js, ./src/store/module/user.js
* core-js/modules/es6.array.from in ./src/libs/tools.js, ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.2.2@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.8@vue-loader/lib??vue-loader-options!./src/view/components/serviceManage/addService.vue?vue&type=script&lang=js&
* core-js/modules/es6.array.sort in ./src/store/module/user.js

解决办法:

cnpm install core-js@2
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值