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/[email protected]@cache-loader/dist/cjs.js??ref--12-0!./node_modules/[email protected]@thread-loader/dist/cjs.js!./node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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/[email protected]@cache-loader/dist/cjs.js??ref--12-0!./node_modules/[email protected]@thread-loader/dist/cjs.js!./node_modules/[email protected]@babel-loader/lib!./node_modules/[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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