vue-cli3搭建项目之webpack配置
一、vue.config.js文件
const path = require('path')module.exports = {publicPath: './', // 基本路径outputDir: 'dist', // 输出文件目录lintOnSave: false, // eslint-loader 是否在保存的时候检查// see /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预设器配置项 详见/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 /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: '/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.assetsSubDirectorylet { 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-pluginconst 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';}...},...}
