本文主要是介绍vue-cli4 修改webpack相关配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用了很久的vue脚手架2。最近终于决定苦心学习一下4。到处找大神们的笔记学习、总计。闲话少说。配置贴上。
- 1.一些关于多页面应用的配置;
- 2.关于性能优化的配置(compression-webpack-plugin, webpack-bundle-analyzer);
- 3.也有对于plugins及module的链式修改(mini-css-extract-plugin);
项目地址 https://github.com/getSpidd/vue-cli4-webpack
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const webpack = require("webpack");
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // gzip 压缩
const productionGzipExtensions = ['js', 'html', 'css'];
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const IS_PROD = process.env.NODE_ENV === 'production';
module.exports = {// 将部署应用程序的基本URL// 将部署应用程序的基本URL。// 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。// https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.publicPath: process.env.NODE_ENV === 'production' ? './' : './',// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'outputDir: 'dist',assetsDir: '',// pages:{ type:Object,Default:undfind }/*构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目的字符串，注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的*/pages: {src1: {// 入口文件，相对于多页面应用的main.js，必需。entry: 'src/main.js',// 应用的模板，相当于单页面应用的public/index.html，非必须，省略时默认与模块名一致。template: 'public/index.html',//o 编译后 dist目录中输出的文件名，非必须，省略时默认与模块名一致。filename: 'index.html',chunks: ['src1']},src2: {// 入口文件，相对于多页面应用的main.js，必需。entry: 'src1/main.js',// 应用的模板，相当于单页面应用的public/index.html，非必须，省略时默认与模块名一致。template: 'public/index1.html',//o 编译后 dist目录中输出的文件名，非必须，省略时默认与模块名一致。filename: 'index1.html',// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'src1',// 在这个页面中包含的块，默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 只有entry属性时，直接用字符串表示模块入口，其他默认与模块名一致},// lintOnSave：{ type:Boolean default:true } 问你是否使用eslintlintOnSave: true,// productionSourceMap：{ type:Bollean,default:true } 生产源映射// 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建productionSourceMap: !IS_PROD, // 生产环境的 source map// devServer:{type:Object} 3个属性host,port,https// 它支持webPack-dev-server的所有选项devServer: {port: 8090, // 端口号host: '0.0.0.0', // 本地和局域网// host: 'localhost', // 只有本地https: false, // https:{type:Boolean}open: false, //配置自动启动浏览器// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理},configureWebpack: config => {if (IS_PROD) {// config.plugins.push(new CompressionWebpackPlugin({// algorithm: 'gzip',// test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名// threshold: 10240, //对超过10k的数据进行压缩// minRatio: 0.8,// deleteOriginalAssets: false //是否删除原文件// }));config.externals = {'jquery': '$','vue': 'Vue','vue-router': 'VueRouter','vuex':'Vuex',};}// 移除 prefetch 插件// config.plugins.delete('prefetch')// 将css 分离打包// config.plugins.push(new MiniCssExtractPlugin({// // Options similar to the same options in webpackOptions.output// // both options are optional// filename: "[name].css",// chunkFilename: "[id].css"// }));// 将插件暴露到window中// config.plugins.push(new webpack.ProvidePlugin({// $:'jquery'// }));},chainWebpack: config => {if (IS_PROD) {// 打包分析// config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{// analyzerMode: 'static'// }]);// 删除预加载config.plugins.delete('preload');config.plugins.delete('prefetch');// 压缩代码config.optimization.minimize(true);// 分割代码// config.optimization.splitChunks({// chunks: 'all'// });// 公共资源提取，// vendors提取的是第三方公共库(满足提取规则的node_modules里面的且页面引入的)，这些文件会打到dist/js/chunk-vendors.js里面// 提取规则是每个页面都引入的才会打到chunk-vendors.js里面(如vue.js)// 控制条件是minChunks字段，所以该字段的值是当前activity/src/projects里面的html的个数// common提取的应该是除了vendors提取后，剩余的满足条件的公共静态模块// 我们的项目不需要common，所以将common置为{}，覆盖默认common配置// config.optimization.splitChunks({// cacheGroups: {// vendors: {// name: 'chunk-vendors',// minChunks: 2,// test: /node_modules/,// priority: -10,// chunks: 'initial'// },// common: {}// }// });}// 修改loader 中关于images的设置// config.module// .rule('images')// .use('url-loader')// .loader('url-loader')// .tap(options => {// options.limit = 9999; // 修改 不大于9999字节的图片不打包 base64转码// options.publicPath = 'www.baidu.com'; // 对打包后的图片路径加上www.baidu.com// // modify the options...// return options// });// 添加loader => 解析html中的图片。 <img src="./favicon.png"> => <img src="https://img-blog.csdnimg.cn/2022010613055662489.png">//注======= 图片路径错误，会导致打包失败。/*额外支持一项黑科技：<div>#include("./layout/top.html")</div>*/// config.module// .rule('html')// .test(/\.(htm|html)$/i)// .use('html-withimg-loader')// .loader('html-withimg-loader')// .end();// config.plugin('extract-css').use(MiniCssExtractPlugin);// config.module.rules.push({// // 处理css// test: /\.css$/,// use: [{// loader: MiniCssExtractPlugin.loader,// options: {// // you can specify a publicPath here// // by default it use publicPath in webpackOptions.output// publicPath: '../'// }// },"css-loader"]// })// config.module.rules.push({// // 处理jquery// test: require.resolve('jquery'),// use: [{// loader: 'expose-loader',// options: 'jquery'// }, {// loader: 'expose-loader',// options: '$'// }, {// loader: 'expose-loader',// options: 'jQuery'// }]// })// config// .plugin('html')// .tap(args => {// args[0].template = '/Users/username/proj/app/templates/index.html'// return args// })},// externals: { // 打包时不打包以下依赖// jquery: "$"// },css: {// // 是否使用css分离插件 ExtractTextPlugin// extract: true,// // 开启 CSS source maps?// sourceMap: false,// // 启用 CSS modules for all css / pre-processor files.// modules: false,// css预设器配置项loaderOptions: {css: {},postcss: {plugins: [// require('postcss-px2rem')({// remUnit: 37.5// })]}}},
}
这篇关于vue-cli4 修改webpack相关配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
