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