关于 Vue CLI 4.0 的 vue.config.js 基本配置范例(jquery、图片压缩、CSS modules)
从Vue CLI 3.0 开始,Webpack的配置文件从 webpack.config.js 变为了 vue.config.js。此外,Vue 对配置文件的写法也进行了一些改动。因此,本文参考其他大神的对webpack的说明以及Vue CLI 4.0 关于webpack的说明文档。起草了一份Vue CLI 4.0 的基本配置,供大家参考:
·
修改:
- 增加devServer使用提示
- 增加
image-webpack-loader
安装提示
前言
从Vue CLI 3.0 开始,Webpack的配置文件从webpack.config.js
变为了vue.config.js
。此外,Vue 对配置文件的写法也进行了一些改动。因此,本文参考其他大神的对webpack的说明以及Vue CLI 4.0 关于webpack的说明文档。起草了一份Vue CLI 4.0 的基本配置,供大家参考:
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin'); // js压缩插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
publicPath: '/', // 基本路径
assetsDir: 'assets',
outputDir: 'dist', // 输出文件目录
filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
chainWebpack: config => {
// 启用打包分析工具 BundleAnalyzer
config.when(process.env.NODE_ENV_BUNDLE_ANALYZE === 'true', config => {
config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin);
});
// 开启图片压缩
config.module
.rule('images')
.test(/\.(png|jpe?g|gif)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 10240; // 小于10kb的图片都转为base64
return options;
})
.end()
// 启用图片压缩功能
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: false })
.end();
/**
* 将svg图片转为组件使用
*/
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule.use('vue-svg-loader').loader('vue-svg-loader');
// 配置Jquery
config.plugin('provide').use(webpack.ProvidePlugin, [
{
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}
]);
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production';
// 将每个依赖包打包成单独的js文件
const optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all', // 选择哪些 chunk 进行优化, 有效值 all,async 和 initial
maxAsyncRequests: 30, // 按需加载时的最大并行请求数
maxInitialRequests: 30, // 入口点的最大并行请求数
minSize: 30000, // 生成 chunk 的最小体积(以 bytes 为单位)
maxSize: 1024000, // 生成 chunk 的最大体积(以 bytes 为单位),对大于该值的js尝试做拆分
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'all',
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;
}
},
common: {
name: `chunk-common`,
minChunks: 2,
priority: -20,
chunks: 'all',
reuseExistingChunk: true
},
element: {
chunks: 'all',
name: `element-ui`,
test: /[\\/]element-ui[\\/]/,
minChunks: 2,
priority: 0
},
merges: {
test: /[\\/]supplyAndDemand[\\/]|[\\/]src[\\/]src\/views[\\/]/,
priority: 0,
name: 'merges'
}
}
},
// 插件优化
minimize: true,
minimizer: [
// js压缩插件
new TerserPlugin({
parallel: true,
// sourceMap: true,
terserOptions: {
extractComments: false, // 注释剥离功能
format: {
comments: false // 删除所有注释
},
warnings: true,
// parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
}
})
]
};
Object.assign(config, {
optimization
});
} else {
// 为开发环境修改配置...
config.mode = 'development';
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
// 别名配置
'@': path.resolve(__dirname, './src'),
'@a': path.resolve(__dirname, './src/assets'),
'@c': path.resolve(__dirname, './src/components')
}
}
});
},
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true, // 开启 CSS source maps?
requireModuleExtension: true, // 是否仅对文件名包含module的css相关文件使用 CSS Modules
loaderOptions: {
css: {
modules: {
localIdentName: '[local]_[hash:base64:8]' // 设定 CSS Modules 命名规则
}
}
} // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
},
// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
parallel: require('os').cpus().length > 1,
// webpack-dev-server 相关配置
devServer: {
// proxy: {
// '/api': {
// target: '',
// changeOrigin: true // 允许跨域
// // pathRewrite: { '^/api': '' }
// }
// },
open: false,
inline: true, // 开启实时刷新
// host: '0.0.0.0', // 允许外部ip访问
port: 8024, // 端口
https: false, // 启用https
overlay: {
warnings: true,
errors: true
} // 错误、警告在页面弹出
},
// 第三方插件配置
pluginOptions: {},
lintOnSave: false
};
需要注意一点,上面的配置中引用了terser-webpack-plugin
、image-webpack-loader
、webpack-bundle-analyzer
、vue-svg-loader
插件。所以,使用时记得安装插件:
npm i terser-webpack-plugin --save-dev
npm i webpack-bundle-analyzer --save-dev
npm i vue-svg-loader --save-dev
npm i image-webpack-loader --save-dev
最近用 npm 装
image-webpack-loader
老是装不完整。
建议使用 cnpm:cnpm i image-webpack-loader --save-dev
npm i jquery --save-dev
注意:
- 使用 Jquery 使还需要再
main.js
引入 Jquery:import $ from 'jquery'
- devServer 不配置代理时,请将代理配置去掉。否则可能会报错:
TypeError: Cannot read property 'upgrade' of undefined
若想进一步了解Vue CLI 4.0 webpack的各种属性,请移步下面这篇文章查看
Vue CLI 4.0 webpack属性讲解以及创建vue.config.js
参考文档:
更多推荐
已为社区贡献38条内容
所有评论(0)