Front end – Team Efficiency (III) Vue CLI3 configuration

Every second saved in the team development process is a valuable thing

The following is my Vue CLI3 configuration (if there is a problem with upgrading webpack to 4.16.5, you can leave a message if there is any other problem, version compatibility is really the core problem in scaffold configuration stage)

HardSourceWebpackPlugin in case of problems refer to it

Github.com/mzgoddard/h…

/ * * @ Description: packaging optimization configuration information * @ Author: wen-zhou wu * @ making: https://github.com/fodelf * @ the Date: 2019-10-14 09:07:29 */ const webpack = require(2019-10-14 09:07:29 */ const webpack = require('webpack')
const path = require('path')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const HappyPack = require('happypack')
const os = require('os')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) const ispro = process.env.NODE_ENV ! = ='development'// gizp zip resource configuration type const GzipExtensions = ['js'.'css'.'png'.'jpg']

function resolve (dir) {
  returnPath. The join (__dirname, dir)} / / share plug-ins const plugins = [/ / DLL plugins add new webpack DllReferencePlugin ({context: process.cwd(), manifest: require('./public/vendor/vendor-manifest.json'}), new AddAssetHtmlPlugin({// DLL file location filepath: path.resolve(__dirname,'./public/vendor/*.js'// DLL reference path publicPath:'./vendor'// DLL output directory outputPath:'./vendor'}), // multi-core config new HappyPack({id:'happy-babel-js',
    loaders: ['babel-loader? cacheDirectory=true'], threadPool: Const devPlugins = [/** * caching speeds up secondary builds */ new HardSourceWebpackPlugin({// Either an absolute path or relative to webpack's options.context. cacheDirectory: 'node_modules/.cache/hard-source/[confighash]', // Either a string of object hash function given a webpack config. configHash: function (webpackConfig) { // node-object-hash on npm can be used to build this. return require('node-object-hash')({ sort: false }).hash(webpackConfig) }, // Either false, a string, an object, or a project hashing function. environmentHash: { root: process.cwd(), directories: [], files: ['package-lock.json', 'yarn.lock'] }, // An object. info: { // 'none' or 'test'. mode: 'none', / / 'debug', 'log', 'info', 'warn', or 'error'. level: 'debug' }, // Clean up large, old caches automatically. cachePrune: { // Caches younger than `maxAge` are not considered for deletion. They must // be at least this (default: 2 days) old in milliseconds. maxAge: 2 * 24 * 60 * 60 * 1000, // All caches together must be larger than `sizeThreshold` before any // caches will be deleted. Together they must be at least this // (default: 50 MB) big in bytes. sizeThreshold: 50 * 1024 * 1024}}), new HardSourceWebpackPlugin.ExcludeModulePlugin([ { // HardSource works with mini-css-extract-plugin but due to how // mini-css emits assets, assets are not emitted on repeated builds with // mini-css and hard-source together. Ignoring the mini-css loader // modules, but not the other css loader modules, excludes the modules // that mini-css needs rebuilt to output assets every time. test: /mini-css-extract-plugin[\\/]dist[\\/]loader/ }, { test: /my-loader/, include: path.join(__dirname, 'vendor')}])] module.exports = {pages: {// exports = {pages: {// page entry: 'src/pages/main.js', // template source template: 'src/pages/index.html', // output filename in dist/index.html: 'index.html', / / when using title option, / / the title tag in the template need to be a < title > < % = htmlWebpackPlugin. Options. The title % > < / title > title: 'Shandong veterans', chunks: ['chunk-vendors', 'chunk-common', 'index', 'runtime~index'] } }, publicPath: ispro ? '':'/', outputDir: 'dist', assetsDir: 'static', lintOnSave: false, productionSourceMap: false, devServer: { port: '9090', open: true, hot: false, inline: true, disableHostCheck: false, overlay: { warnings: false, errors: true }, proxy: { '/ *': { target: 'xx', ws: false}}}, CSS: {loaderOptions: {// Pass the option sass to sas-loader: {// @/ is an alias for SRC // / so suppose you have the file 'SRC/variable. SCSS' data: '@import "@/assets/ CSS /compute. '}}}, configureWebpack: config => {// Gizp package resources can be set to configurable let pluginsArry = ispro? plugins.concat([ new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('(\ \.' + GzipExtensions.join('|'+') $'), threshold: 10240, minRatio: 0.8}), new UglifyJsPlugin({uglifyOptions: {compress: {drop_console: true, drop_debugger: true, pure_funcs: ['console.log'] // remove console}}, sourceMap: false, parallel: true})]) : plugins.concat(devPlugins) return {plugins: PluginsArry}}, chainWebpack (config) {// Add alias config.resolve.alias.set ('assets', resolve('src/assets')) .set('components', resolve('src/components')) // Can be configured to optimize reference optimization path temporarily // multi-core package configuration config.module.rule('js').use.loader = 'happypack/loader? id=happy-babel-js'// Image package config.module. rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true, disable: true }) .end() config.when(ispro, config => { config.plugins.delete('prefetch-index')
      // 移除 preload 插件
      config.plugins.delete('preload-index') // Insert the dell resource config.plugin ('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [ { // `runtime` must same as runtimeChunk name. default is `runtime` inline: .. * / runtime \ \. Js $/}].) the end () / / resource config. The separation and extraction rules optimization. SplitChunks ({/ / the default value is 30 KB minSize: // All asynchronous requests must not exceed 5 maxAsyncRequests: 5, maxInitialRequests: 3, cacheGroups: {default: false, vendors: false, chunk: { test: resolve('src'), chunks: 'all', enforce: false, priority: 10, name: 'chunk-vendors', reuseExistingChunk: true }, common: { chunks: 'all', minChunks: 2, name: 'chunk-common', enforce: false, priority: 5 } // runtime: { // name: 'runtime~index', // reuseExistingChunk: true, // enforce: true, // priority: 5 / /}}}) / / the default configuration page mode that scalability config. Optimization. RuntimeChunk ('multiple')})}}Copy the code