webpack的配置项
vue.config.js下,我们对其进行配置
const path = require('path');// 导入path,进行之后的路径拼接
function resolve (dir) {
return path.join(__dirname, dir)
}
// 导出默认配置
module.exports = {
chainWebpack: (config) => {
// webpack的配置,减少import的vue和element进行外部拓展依赖,需要做标签导入
config.externals({
'vue': 'Vue',
'element-ui': 'ElementUI',
})
}
}
chainWebpack 与configureWebpack 的区别
- chainWebpack
- 配置另一种写法——
webpack-chain
(链式操作)底层是webpack-chain
,
- 配置另一种写法——
- configureWebpack
- 底层是 webpack-merge
清除webpack的console
首先,安装uglifyjs-webpack-plugin插件:
npm install uglifyjs-webpack-plugin --save
其次,在vue.config.js文件引入插件。较新版本的插件会报错。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
最后,配置configureWebpack如下代码:
// 方法一:
configureWebpack:{
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output:{
comments:false
},
// 删除console debugger 删除警告
compress: {
warnings: false, // 删除警告
drop_console: true,// console
drop_debugger: false,// 删除debugger
pure_funcs: ['console.log']//移除console
}
}
})
]
}
}
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true, // console
drop_console: true,
pure_funcs:['console.log'] // 移除console
},
},
sourceMap: false,
parallel: true,
})
)
}
},
}
详细配置-转载至vue-cli3 vue.config.js配置
yarn add compression-webpack-plugin
yarn add uglifyjs-webpack-plugin
复制代码
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
console.log("process.env.NODE_ENV:" + process.env.NODE_ENV);
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css']
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
publicPath: './', // 默认'/',部署应用包时的基本 URL
outputDir: 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: false, // 生产环境的 source map
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
extract: true,
// 是否开启 CSS source map?
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时,使用 `{ sass: { ... } }`。
loaderOptions: {
// sass: {
// prependData: `
// @import "~@/assets/name.scss";
// `
// },
// scss: {
// prependData: `@import "~@/variables.scss";`
// },
less: {
globalVars: {
primary: '#fff'
}
}
},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
pwa: {},
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
//修复 Lazy loading routes Error
config.plugin('html').tap(args => {
args[0].chunksSortMode = 'none';
return args;
});
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
.set('base', resolve('src/base'))
.set('static', resolve('src/static'));
//压缩图片
// config.module
// .rule("images")
// .use("image-webpack-loader")
// .loader("image-webpack-loader")
// .options({
// mozjpeg: {progressive: true, quality: 65},
// optipng: {enabled: false},
// pngquant: {quality: "65-90", speed: 4},
// gifsicle: {interlaced: false},
// webp: {quality: 75}
// });
},
configureWebpack: config => {
if (IS_PROD) {
const plugins = []
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'] //移除console
},
mangle: false,
output: {
beautify: true,//压缩注释
}
},
sourceMap: false,
parallel: true,
})
)
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
//去掉 console.log
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']//移除console
}
},
sourceMap: false,
parallel: true
})
);
config.plugins = [...config.plugins, ...plugins]
}
// 打包分析
if (process.env.IS_ANALYZ) {
config.plugin('webpack-report')
.use(BundleAnalyzerPlugin, [{
analyzerMode: 'static',
}]);
}
// //配置 externals
// //防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
// config.externals = {
// 'vue': 'Vue',
// 'element-ui': 'ELEMENT',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex',
// 'axios': 'axios'
// }
},
devServer: {
// overlay: {
// warnings: true,
// errors: true
// },
open: IS_PROD,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',
changeOrigin: true
}
}
}
};