vue-cli3搭建项目之webpack配置

一、vue.config.js文件

const path = require('path')module.exports = {publicPath: './', // 基本路径outputDir: 'dist', // 输出文件目录lintOnSave: false, // eslint-loader 是否在保存的时候检查// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md// webpack配置chainWebpack: (config) => {},configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production'} else {// 为开发环境修改配置...config.mode = 'development'}Object.assign(config, {// 开发生产共同配置resolve: {alias: {'@': path.resolve(__dirname, './src'),'@c': path.resolve(__dirname, './src/components'),'@p': path.resolve(__dirname, './src/pages')} // 别名配置}})},productionSourceMap: false, // 生产环境是否生成 sourceMap 文件// css相关配置css: {extract: true, // 是否使用css分离插件 ExtractTextPluginsourceMap: false, // 开启 CSS source maps?loaderOptions: {css: {}, // 这里的选项会传递给 css-loaderpostcss: {} // 这里的选项会传递给 postcss-loader}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptionsmodules: false // 启用 CSS modules for all css / pre-processor files.},parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa// webpack-dev-server 相关配置devServer: {open: process.platform === 'darwin',host: '0.0.0.0', // 允许外部ip访问port: 8022, // 端口https: false, // 启用httpsoverlay: {warnings: true,errors: true}, // 错误、警告在页面弹出proxy: {'/api': {target: 'http://www.baidu.com/api',changeOrigin: true, // 允许websockets跨域// ws: true,pathRewrite: {'^/api': ''}}} // 代理转发配置，用于调试环境},// 第三方插件配置pluginOptions: {}
}

二、优化打包chunk-vendors.js文件体积过大
chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js
方案一：利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下

configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production'// 将每个依赖包打包成单独的js文件let optimization = {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000, // 依赖包超过20000bit将被单独打包cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name (module) {// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`}}}}}Object.assign(config, {optimization})} else {// 为开发环境修改配置...config.mode = 'development'}Object.assign(config, {// 开发生产共同配置resolve: {alias: {'@': path.resolve(__dirname, './src'),'@c': path.resolve(__dirname, './src/components'),'@p': path.resolve(__dirname, './src/pages')} // 别名配置}})}

方案二、利用DllPlugin和DllReferencePlugin将依赖包打包成外部文件在index中引入
1.在package.json中新建library,用于存储即将要打包的依赖包名和打包后的文件名

{..."name": "demo-cli3","version": "1.0.0","version_lib": "1.0.0","library": {"lib_v1_0": ["jquery/dist/jquery.min.js"],"vueBucket_v1_2": ["vue-router","vuex"]},...
}

2.创建webpack.dll.config.js文件，代码如下
const path = require('path')
const webpack = require('webpack')
const {library} = require('./package.json')
// const assetsSubDirectory = process.env.NODE_ENV === 'production'
//   ? build.assetsSubDirectory : dev.assetsSubDirectory
let { version_lib } = require('./package.json');
version_lib = version_lib.replace(/\./g,'_');
module.exports = {entry: library,output: {path: path.resolve(__dirname, './libs/package/js'),filename: `[name].${version_lib}.dll.js`,library: '[name]_library'},module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/}]},optimization:{minimizer:[new UglifyPlugin({uglifyOptions: {warnings: false,compress: {drop_console: true, // consoledrop_debugger: false,pure_funcs: ['console.log'] // 移除console}}})]},plugins: [new webpack.optimize.ModuleConcatenationPlugin(),new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),new webpack.DllPlugin({path: path.resolve(__dirname, './libs/package/json', '[name].manifest.json'),name: '[name]_library',context: process.cwd()})]
}

3.在vue.config.js中配置DllReferencePlugin

let { version, version_lib , openGzip,library } = require('./package.json');
...
module.exports = {configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production';...Object.assign(config, {...plugins:[...config.plugins,...Object.keys(library).map(name => {return new webpack.DllReferencePlugin({context: process.cwd(),manifest: require(`./libs/package/json/${name}.manifest.json`),})})]});...} else {// 为开发环境修改配置...config.mode = 'development';}...},
}
...

4.将打包好的js自动添加进index.html中
下载add-asset-html-webpack-plugin

npm install --save-dev add-asset-html-webpack-plugin
在vue.config.js中配置add-asset-html-webpack-plugin
const webpack = require('webpack');
const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
...
module.exports = {...configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production';...Object.assign(config, {...plugins:[...new AddAssetHtmlPlugin(Object.keys(library).map(name => {return {filepath: require.resolve(path.resolve(`libs/package/js/${name}.${version_lib}.dll.js`)),outputPath: 'static/lib/js',publicPath:'./static/lib/js',includeSourcemap: false}})),]});...} else {// 为开发环境修改配置...config.mode = 'development';}...},...
}

vue-cli3搭建项目之webpack配置相关推荐

vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
vue cli3 搭建项目使用vue-router 以及 element-ui
搭建vue项目,(node和git 首先要下载) 1.首先根据vue官网 Cli的说明,快速搭建. cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run ser ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
vue 配置【详解】 vue.config.js （含 webpack 配置）
目录常用配置完整配置使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹,若需要进行相关配置,需在项目目录下新建文件 vue.config.js 常用配置 // ...
【vue create】一.使用vue creat搭建项目
场景:使用vue create脚手架快速搭建vue的项目前提:需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 1.使用d ...
Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
Koa2仿知乎服务端项目：Webpack配置
项目简介该项目为一个后端项目,该项目仿"知乎",模拟实现了: JWT用户认证.授权模块上传图片模块个人资料模块关注与粉丝模块话题模块问题模块答案模块评论模块共计4 ...

vue-cli3搭建项目之webpack配置

vue-cli3搭建项目之webpack配置

vue-cli3搭建项目之webpack配置相关推荐

最新文章

热门文章