Detailed explanation of WebPack configuration methods in the Vue-CLI scaffolding

What is WebPack

WebPack is a Module Bundler (module package tool), so-called module is to use some static resources in the usual front-end development, such as JavaScript, CSS , Pictures, etc., WebPack refer to the module

WebPack supports AMD and Commonjs, and other module systems, and compatible with multiple JS writing specifications, can handle the relationship between modules. Therefore, it has more powerful JS modular functions that can be unified and packaged on static resources. Introduction to this picture in the official website:

详解vue-cli脚手架中webpack配置方法

It can replace GRUNT and GULP in many places because it can compile pack CSS, do CSS pre-processing, compile the js dialect, package pictures, code compression, etc. So after I arrived with WebPack, I didn’t want to use Gulp

Summary as follows:

Pair of Commonjs The symptoms of AMD and ES6 are compatible;

    Support package for JS, CSS, pictures and other resource files;
  • Series module loader and plug-in mechanism make it better Flexibility and scalability, such as support for CoffeeScript, ES6;
  • There are independent configuration files WebPack.config.js;
  • can cut the code into different chunks, implement on-demand Loading, reducing initialization time;
  • Supports SourceURLS and Sourcemaps, easy to debug;
  • Most of the PLUGIN interface, mostly internal plugins, flexible in use;
  • WebPack Use asynchronous IO and have multi-level cache. This makes WEBPACK is very fast and more accelerated on incremental compilation;
  • WebPack is mainly used in Vue and React, in fact it is very like Browserify, but puts the application to multiple files . If there is a plurality of pages in a single page, then the user only downloads the code of the corresponding page. When he accesses another page, they don’t need to re-download the universal code.

  • Based on my project

The basic directory structure of the Vue Webpack configuration file is as follows:

config – dev.env.js // dev environment variable configuration ├── INDEX.JS / / DEV and PROD environment Some basic configuration └ – Prod.Env.js // PROD environment variable configuration build ─ ─ build.js Script of // NPM Run Build ├─- Check-Versions.js // Check NPM and NODE version ├─ Logo.png ├─ utils.js // Some tool methods are used to generate CssLoader and StyleLoader Configuration ├─- Vue-loader.conf.js // Vueloader configuration information ├── WebPack.base.conf.js // devack.dev.conf.js // devack.dev.conf.js // dev environment Configuration └─- WebPack.Prod.conf.js // Configuration of the Prod Environment

Config folder file detailed
  dev.env.js  
The files in Config are actually served in build, most of which define a variable export going out

Use strict mode] / *** [WebPack-Merge provides a merge function, which creates a new object in the array and merge objects] * / const merge = require (‘WebPack-Merge’) Const Prodenv = Require (‘./ prod.env’) module.exports = merge (Prodenv, {node_env: ‘”development”‘})


prod.env.js
  When the development environment configuration of dev.env.js is transferred, the production environment configuration of Prod.Env.js is called when published  

Use strictModule.exports = {node_env: ‘”production”‘}


}

}
   Const Path = Require ('Path') module.exports = {/ ** * [Development Environment Configuration] * / dev: {askSSUBDIRECTORY: 'Static', // subdirectory, generally store CSS, JS, Image and other files] AssetsPublicPath: '/', // [root "/ *** [Configuration Service Agent] * / ProxyTable: {'/ HCM': {target: 'https://127.0.0.1:84448', Changeorigin: True, Secure: False}, headers: {"ACCEss-control-allow-Origin ":" * "," Access-Control-Allow-Methods ":" Get, Post, Put, Delete, Patch, Options "," Access-Control-Allow-Headers ":" x- Requested-with, content-type, authorization "}}, hostization"}}, host: '127.0.0.1', // [browser access address] port: 8083, // port number setting, port number occupation problem can be modified here ] AutoOpenBrowser: True, // [Is it open http://127.0.0.1:8083/ page after compiling (input command line NPM Run DEV)] Erroroverlay: true, // [Browser Error Tips] NotifyONERRRORS: TRUE, / / [Cross-platform error prompt] Poll: false, // [File System "Note Document Changes Decs: True, // [Whether to Enable Code Specification Check] ShowESLINTERRORSINOVERLAY: FALSE, / / ​​[ Whether to show Eslint's error message] DevTool: 'evAl-source-map', // [Add debugging, this property is original source code] cachebusting: true, // [Make the cache invalid] cssourceMap: false // [code compression Making the bug positioning will be very difficult, so introducing the location information record before and after the SourceMap record compression, directly positioning directly to the position before uncompressed, will be greatly convenient for us]}, / *** [production environment configuration]* / build: {/ *** [index, login, license, forbidden, notfound, interNal.License "The location and name generated after compiling, change the suffix as needed] * / index: path.resolve (__ Dirname, '../ ../hcm-modules/hcm-web/src/main/resources/meta-inf/resources/index.html '), login: path.resolve (__ Dirname,' ../../hcm-modules/hcm- Web / src / main / resources / meta-inf / resources / login.html '), license: path.resolve (__ dirname,' ../../hcm-modules/hcm-web/src/main/Resources/meta -Inf / resources / license.html '), Forbidden: path.resolve (__ dirname,' ../../hcm-modules/hcm-web/src/main/resources/meta-inf/Resources/error/403. HTML '), NOTFOUND: path.resolve (__ dirname,' ../../hcm-modules/hcm-web/src/main/resources/meta-inf/Resources/rror/404.html '), Internal: Path .resolve (__ dirname, '../../hcm-modules/hcm-web/src/main/resources/meta-inf/resources/rror/500.html'), Licenses: path.resolve (__ dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/docs/licenses.html'),/*** [compiled after storage environment to generate code position] * / assetsRoot: path.resolve (__ dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources'), assetsSubDirectory:' static ', // js, css, images stored folder name assetsPublicPath:' ./ ', // release the root directory, usually after a local package dist open file error, modify here ./. If the file is on the line, can be changed according to the file location path productionSourceMap: true, devtool: '# source-map', productionGzip: false, // unit gzip command to the compressed file, the file needs to be compressed mode gzip and there js extension css productionGzipExtensions: [ 'js', 'css'], bundleAnalyzerReport: process.env.npm_config_report // analysis package}} 

build folder Detailed document
build.js
  the document action, i.e. to build a production version. package.json in scripts is a build node build / build.js, enter the command line npm run build the file is compiled to generate a production environmentCode.  
Require (‘./ Check-Versions’) () // Check-Versions: Call the check version file. Plus () representative directly calls this function process.env.node_env = ‘product’ // Settings The current production environment / *** The following defined constant introduction plugin * / const ora = Require (‘ORA’) // Load Animation Const RM = Require (‘RIMRAF’) // Remove file const path = required (‘Path’) const chalk = request (‘chalk’) // A color set of copy output const webpack = required (‘WebPack’) const config = Require (‘../ config’) // Default Read the following index.js file const webpackconfig = Require (‘./ WebPack.Prod.conf’) const spinner = ORA (‘Building for Production …) / / Call the START to implement loading animation, optimize the user experience spinner.start () // Delete the Dist file first into a new file, because sometimes use HASH to name, delete the entire file to avoid redundant RM (path.join) CONFIG.BUILD.ASSETSROOT, config.build.assetssubdirectory, err => {if (err) throw Err Webpack (WebPackConfig, (ERR, Stats) => {spinner.stop () IF (ERR) Throw err process.stdout. WriteStats.toString ({Colors: true, modules: false, children: false, chunks: false, chunkmodules: false}) + ‘\ n \ n’) f (stats.haserror ()) {console.log (chalk.red (‘Build failed with errors. \ N’)) process.exit (1)} console.log (chalk.cyan) Console.log (Chalk.Yellow.Yellow (‘Tip: Built Files Are Meant to be served over an http server. \ n ‘+’ opening index.html over file: // won \ ‘t Work. \ n’))})})

CHECK-VERSIONS.JS

This file is used to detect version of Node and NPM, implementation version dependencies
   Const chalk = required ('chalk ') const semver = require (' semver ') // Check the version const packageconfig = Require (' ../ package.json ') const shell = Require (' shelljs') Function Exec (cmd) {// Return through The new sub-process of the Child_Process module, and turn into string Return without spaces after executing the UNIX system command.require ( 'child_process') execSync (cmd) .toString () trim ()} const versionRequirements = [{name:.. 'node', currentVersion: semver.clean (process.version), // used semver formatted version versionRequirement : packageconfig.Engines.node // Get the Node version set in package.json}] f (shell.Which ('npm')) {VersionRequirements.push ({name: 'npm', currentversion: EXEC ('npm) Version '), // automatically calls the npm --version command, and returns the parameters to the exec function, gains the pure version number VersionRequirement: packageconfig.Engines.npm}} module.exports = function () {const warnings = [ ] for (let i = 0; i 
UTILS.JS

UTILS is the meaning of the tool, is a file used to process CSS.

Const path = Require (‘Path’) const config = Require (‘../ config’) const extractTextPlugin = Require (‘extract-text-webpack-plugin “) Const PackageConfig = Require’../Package.json’)exports.assetsPath = function (_path) {const assetsSubDirectory = process.env.NODE_ENV ===’ production ‘config.build.assetsSubDirectory:? Config.dev.assetsSubDirectory return path.posix.join (assetsSubDirectory, _path)} exports.cssLoaders = function (options) {options = options || {} // used css-loader and postcssLoader, options.usePostCSS property judged by whether the compression method postcssLoader const cssLoader = { loader: ‘css-loader’, options: {sourceMap: options.sourceMap}} const postcssLoader = {loader: ‘postcss-loader’, options: {sourceMap: options.sourceMap}} // generate loader string to be used with extract TEXT PLUGIN FUNCTION GENERATELOADERS (LOADER, LOADEROPTIONS) {const loaders = Options.usepostcss? [CSSLoader, PostcssLoader]: [CSSLoader] IF (LOADER) {loaders.push ({loader: loader + ‘-loader’, //Object.assign is a shallow copy of the ES6 syntax, and the wake two merged copy completion assignments: object.assign ({}, loaderoptions, {sourcemap : options.SourceMap}})}} // extract CSS WHEN THATOPTION IS specified // (Which is the case during product build) if (options.extract) {// extractTextPlugIN can extract text, representing the above processing Loaders, using Vue-Style-Loader Return ExtractTextPlugin.extract ({Use: Loaders, Fallback: ‘Vue-Style-Loader’, publicPath: ‘../../’}} else {/… / Return Vue-Style-Loader Connection Loaders Return [‘Vue-Style-Loader’]. Concat (Loaders)}} // https://vue-loader.vuejs.org/en/configurations/extract-css .html return {CSS: generateLoaders (), // Requires CSS-Loader and Vue-Style-Loader Postcss: generateLoaders (), // Requires CSS-Loader and PostcssloadeR and Vue-Style-Loader Less: GenerateLoaders (‘Less’), // Requires Less-Loader and Vue-Style-Loader Sass: GenerateLoaders (‘Sass’, {INDSYNTAX: TRUE}), // Need Sass-Loader and Vue-style-loader scss: generateLoaders (‘Sass’), // Requires Sass-Loader and Vue-Style-Loader Stylus: GenerateLoaders (‘Stylus’), // Requires Stylus-Loader and Vue-Style-Loader Styl: GenerateLoaders ( ‘stylus’) // need stylus-loader and vue-style-loader}} // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) {const output = [] const loaders = Exports.cssLoaders (options) // Summary of various CSS, LESS, SASS, etc. Output for (const extension in loaders) {const loader = loadingers [extension] Output.push ({Test: New Regexp) ‘\\.’ + extension + ‘$’), Use: loader}} Return Output} exports.createnOtifierCallback = () => {// Send cross-platform notification system const notifier = Require (‘Node-Notifier’) Return (Severity, Errors) => {if (Severity! == ‘Error’) Return // When an error occurs Output error message title, error message details, subtitle, and icon const error = errors [0] const filename = error.file && error.file.split (‘!’). Pop () Notifier.Notify ({Title: packageconfig. Name, Message: Severity + ‘:’ + Error.Name, Subtitle: FileName || ‘, icon: path.join (__ DiRName,’ logo.png ‘)}}}
  < versionRequirements.length; i++) {
  const mod = versionRequirements[i]
  if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
   //上面这个判断就是如果版本号不符合package.json文件中指定的版本号,就执行下面错误提示的代码
warnings.push(mod.name + ': ' +
    chalk.red(mod.currentVersion) + ' should be ' +
    chalk.green(mod.versionRequirement)
   )
  }
 }
 if (warnings.length) {
  console.log('')
  console.log(chalk.yellow('To use this template, you must update following to modules:'))
  console.log()
  for (let i = 0; i < warnings.length; i++) {
   const warning = warnings[i]
   console.log(' ' + warning)
  }
  console.log()
  process.exit(1)
 }
} 
Vue-loader.conf.js
The main role of this file is to process the .vue file, resolve each language block in this file, convert to JS available JS module.

Const utils = Require (‘./ utils’) const config = Require (‘ ../ config ‘) const isproduction = process.env.node_env ===’ PRODUCTION’CONST SOURCEMAPENABED = IsProduction? config.build.productionsourceMap: confIg.dev.csssourceMap // Handling the CSS file in the project, the production environment and test environment is to open SourceMap, and the extraction style in the extract can only be module.exports = {Loaders: utils.cssloaders in the production environment in the production environment ({SourceMap: SourceMapenabled, Extract: isproduction}), cssourcemap: sourceMapenabled, cachebusting: config.dev.cachebusting, // During the template compilation process, the compiler can convert some properties, such as SRC paths, convert to Require calls for Target resources can be processed by WebPack Transformtorequire: {Video: [‘SRC’, ‘Poster’], Source: ‘SRC’, IMG: ‘SRC’, Image: ‘XLink: href’}}

  WebPack.Base.conf.js  
WebPack.Base.conf.js is the basic configuration file proposed by the development and production of joint use, mainly implementing the formulation entry, configuring the output environment, configuration Module Resolve and plug-in

Const path = Require (‘PATH’) const utils = required (‘./ utils’) / *** [introduced index.js file Path] * / const config = Require (‘../ config’) const vueloaderconfig = Require (‘./ vue-loader.conf’) / ** * [Get file path]* @Param DIR [file name] * _Dirname is the absolute path of the current module file * * @ Return file absolute path * / function resolve (dir) {Return path.join (__ dirname, ‘..’, dir)} const CreatelintingRule = () => ({Test: /\. (JS|Vue) $/, loader: ‘eslint-loader’, Enforce: ‘pre’, include: [Resolve (‘src’), Resolve (‘Test’ ), Options: {Formatter: Require (‘eslint-friendatter’), EMITWARNING:! CONFIG.DEV.SHOWESLINTERRORSINOVERLAY}}) module.exports}) Module.exports = {Context: path.Resolve (__ DIRNAME, ‘../’), / ** * [Entrance file configuration] * / Entry: {/ ** * [Entrance file path, Babel-polyfill is support for ES6 syntax] * / app: [‘Babel-polyfill’, ‘./src/main .js’], Login: [‘Babel-polyfill’, ‘./src/loginmain.js’], license: [‘ Babel-polyfill ‘,’ ./src/licensemain.js’]}, / ** * [Document Export Configuration] * / Output: {Path: config.build.assetsRoot, filename: ‘[name] .js’, PUBLicpath: process.env.node_env === ‘productSpublicPath: config.dev.AsssetspublicPath // Public storage path}, resolve: {/ ** * [eXtensions: Profile extension, when When important files, don’t need to add extensions] * / extensions: [‘.js’,’ .vue ‘,’ .json ‘], / ** * [alias to the path definition alias] * / alias: {‘ Vue $ ‘:’ Vue / Dist / Vue.esm.js’, ‘@’: Resolve (‘src’)}}, / *** Use the plugin to configure the processing method of the corresponding file * / module: {Rules: [… (config.dev.useslint? [CreatelintingRule ()]: []), / ** * [Use Vue-Loader to convert the Vue file into JS] * / {test: /\.vue do not, loader: ‘ Vue-loader ‘, options: vueloaderconfig}, / ** * [compiles JS into ES5 / ES6 files via Babel-Loader] * / {test: /\.js $/, loader:’ Babel-loader ‘, Include : [Resolve (‘SRC’), Resolve (‘Test’)]}, / ** * [image, audio, fonts all use URL-Loader for processing, more than 10,000 compiled into Base64] * / {TEst: /\.(png|jpe?g|gif||: ‘url-loader’, options: {limited: 10000, name: utils.assetspath (‘IMG / [Name]. [Hash: 7]. [ext] ‘)}}, {test: /\.(MP4|Webm|OgG|MP3|WAV|FLAC|AAC) (\?.*) (\?.* )?/, loader : ‘URL-Loader’, Options: {Limit: 10000, Name: Utils.assetsPath (‘Media / [Name]. [Hash: 7]. [EXT]’)}}, {Test: /\.(Woff2? | eot | TTF | OTF) (\? *)? $ /, loader: ‘url-loader’, options: {limited: 10000, name: utils.assetspath (‘fonts / [name]. [hash: 7] [ext] ‘)}}, / ** * [canvas parsing] * / {test: path.resolve (`$ {resolve (‘ src ‘)} / lib / jtopo.js`), loader: [‘ exports -Loader? Window.jtopo ‘,’ script-loader ‘]}]}, // The following options are Node.js global variables or modules, which is mainly to prevent WebPack from injected into some node.js things in Vue node: {setimmediate : False, Dgram: ‘EMpty ‘, fs:’ empty ‘, net:’ empty ‘, tls:’ empty ‘, child_process:’ EMPTY ‘}}

WebPack.dev.conf.js
   Const path = Require ('Path') const utils = required ('./ utils') const webpack = required (' WebPack ') const config = required (') Const Config = Require ../config'//A Implement WebPack.dev.conf.js in the inheritance of WEPACK.BASE.CONF.JS Const Merge = Require ('WebPack-Merge') const baseWebPackConfig = Require ('./webpack .base.conf ') const HtmlWebpackPlugin = require (' html-webpack-plugin ') // error messages and log webpack beautification of plug-const FriendlyErrorsPlugin = require (' friendly-errors-webpack-plugin ') // Check idle port Location, by default Search 8000 This port const portfinder = require ('portfinder') // processs is a global object for Node to get the current program's environment variable, Hostconst Host = process.env.hostconst port = process.env.port&& Number (process.env.PORT) function resolveApp (relativePath) {return path.resolve (relativePath);} const devWebpackConfig = merge (baseWebpackConfig, {module: {// styleLoaders rules out processing tool utils, generated css , less, postcss other rules rules: utils.styleLoaders ({sourceMap: config.dev.cssSourceMap, usePostCSS: true})}, // enhanced debugging devtool: config.dev.devtool, // here are arranged in the config InDex.js set up the DevServer: {// console display option with None, Error, Warning or InfoClientLoglevel: 'Warning', // Using HTML5 History APIHISTORYAPIFALLBACK: TRUE, Hot: true, // Hot load compress : True, // Compressed Host: Host || Config.dev.host, Port: Port || config.dev.port, open: config.dev.autoopenBrowser, // Automatically open the browser overlay: config.dev. ERROROVERLAY? {Warnings: false, errors: true}: false, publicpath: config.dev.assetspublicPath, Proxy: config.dev.proxytable, // interface proxy quiet: true, // The console is forbidden to print a warning and error, if you use FriendlyErrorSplugin to True WatchOptions: {Poll: config.dev.poll, // File System Detection Change}}} , Plugins: [New WebPack.definePlugin ({'process.env': Require ('../ config / dev.env')}, new webpack.hotmoduleReplacementPlugin (), // module hot replacement plugin, modify the module Need to refresh the page new webpack.namedModulesPlugin (), // Display the correct name of the file New WebPack.NoemitonerRorsplugin (), // When the WebPack is compiled, the middle-end packaging process is to prevent the error code from being packaged in the file // https: //github.com/ampedandwired/html-webpack-plugin// The plugin automatically generates an HTML5 file or use a template file to inject compilation code into the new htmlwebpackplugin ({filename: 'index.html', template: 'index .html ', Inject: True, Chunks: [' App ']}), new htmlwebpackplugin ({filename:' login.html ', template:' login.html ', inject: true, chunks: [' login ']} ), new htmlwebpackplugin ({fIlename: 'license.html', Template: 'license.html', Inject: true, chunks: ['license']}, new htmlwebpackplugin ({filename: 'licenses.html', Template: 'licenses.html', Inject: true, chunks: []}), new htmlwebpackplugin ({filename: '404.html', template: path.resolve (__ dirname, '../errors/404.html'), Favicon: ResolveApp ('Favicon. ICO '), INJECT: TRUE, Chunks: []}), New HTMLWebPackPlugin ({filename:' 403.html ', template: path.resolve (__ DIRNAME,' ../errors/403.html '), Favicon: ResolveApp ('Favicon.ico'), Inject: true, chunks: []}), new htmlwebpackplugin ({filename: '500.html', template: path.resolve (__ DIRNAME, '../errors/500.html') , Favicon: ResolveApp ('Favicon.ico'), INJECT: TRUE, Chunks: []})]}) Module.expOrts = new promise => {portfinder.baseport = process.env.port || config.dev.port // Find port number portfinder.getport (Err, port) => {if (err) {REJECT} ELSE {// port is occupied, reset EVN and DevServer's port process.env.port = port // add port to devserver confwebPackconfig.DEVSERVER.PORT = Port // Friendly output information devworkpackconfig .plugins.push (new FriendlyErrorsPlugin ({compilationSuccessInfo: {messages: [ `Your application is running here: http: // $ {devWebpackConfig.devServer.host}: $ {port}`],}, onErrors: config.dev. NOTILS.CREATENOTIFIERCALLBACK (): undefined})}}}}) 

WebPack.Prod.conf.js

Const path = Require (‘Path’) const utils = required (‘./ UTils’) const webpack = require ( ‘webpack’) const config = require ( ‘../ config’) const merge = require ( ‘webpack-merge’) const baseWebpackConfig = require ( ‘./ webpack.base.conf’) const CopyWebpackPlugin = require ( ‘copy-webpack-plugin’) const HtmlWebpackPlugin = require ( ‘html-webpack-plugin’) const ExtractTextPlugin = require ( ‘extract-text-webpack-plugin’) const OptimizeCSSPlugin = require ( ‘optimize-css -assets-webpack-plugin ‘) const UglifyJsPlugin = require (‘ uglifyjs-webpack-plugin ‘) const env = require (‘ ../ config / prod.env ‘) function resolveApp (relativePath) {return path.resolve (relativePath) ;} const webpackConfig = merge (baseWebpackConfig, {module: {rules: utils.styleLoaders ({sourceMap: config.build.productionSourceMap, // defaults to on-mode debug true extract: true, usePostCSS: true}).},devtool: config.build.productionSourceMap config.build.devtool:? false, output: {path: config.build.assetsRoot, filename: ( ‘. js / [name] [chunkhash] .js’) utils.assetsPath, chunkFilename: Utils.assetspath (‘JS / [ID]. [chunkhash] .js’)}, plugins: [// http://vuejs.github.io/Vue-loader/en/workflow/Production.html new WebPack.definePlugin ({ ‘process.env’: env}), new UglifyJsPlugin ({uglifyOptions: {compress: {warnings: false // wARNING: true reserved warning, false not retained}}, sourceMap: config.build.productionSourceMap, parallel: true }), // Extract CSS INTO ITS OWN FILE / / Extracts text. For example, the INDEX page after packaging has Style Insert, which is drawn by this plugin, reducing request new extractTextPlugin ({filename: utils.assetspath (‘css / [name]. [Contenthash] .css’), allchunks: true,}) , // Optimize the CSS Plugin New Optimizecssplugin ({CSSProcessorOptions: config.build.productionSourceMap? {safe: true, map: {inline: false}}: {safe: true}}), // html packed new HtmlWebpackPlugin ({filename: config.build.index, template: ‘index .html ‘, INJECT: TRUE, // Compress Minify: {RemoveComments: true, // Delete Note CollapseWhitespace: true, // Delete Space RemoveattributeQuotes: True // Delete Property Quotation Nome}, Chunks: [‘ Vendor ‘,’ Manifest ‘,’ app ‘], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode:’ dependency ‘}), new HtmlWebpackPlugin ({filename: config.build.login, template:’ login.html ‘, inject: true, MiniFy: {RemoveComments: true, collapsewhitespace: true, removeattributequotes: true}, chunks: [‘vendor’, ‘manifest’, ‘login’], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’}), new HtmlWebpackPlugin ({filename: config.build.license, template: ‘license.html’, inject: true, minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true}, chunks: [ ‘vendor’, ‘manifest’, ‘license’], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’}), new HtmlWebpackPlugin ({filename: config. build.notfound, template: path.resolve (__ dirname, ‘../errors/404.html’), inject: true, favicon: resolveApp ( ‘favicon.ico’), minify: {removeComments: true, collapseWhitespace: true, REMOVEATTRIBUTEQUOTES: TRUE}, Chunks: [], // necessaryto consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’}), new HtmlWebpackPlugin ({filename: config.build.forbidden, template: path.resolve (__ dirname, ‘../errors/403.html’), inject: true, favicon: resolveApp ( ‘favicon.ico’), minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true}, chunks: [], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’ }), new htmlwebpackplugin ({filename: config.build.internal, template: path.resolve (__ Dirname, ‘../errors/500.html’), Inject: true, Favicon: ResolveApp (‘Favicon.ico’), MiniFy: {RemoveComments: True, Collapsewhitespace: True, RemoveattributeQuotes: TRue}, chunks: [], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’}), new HtmlWebpackPlugin ({filename: config.build.licenses, template: ‘licenses.html’, inject: true , minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true}, chunks: [], // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: ‘dependency’}), // keep module.id stable when vender Modules Does Not Change New WebPack.hashedModuleIDSPLUGIN (), // enable scope hoistingnew WebPack.Optimize.ModuleconcateNationPlugin (), // A common module is extracted to enhance your code in the browser. New WebPack.optimize.commonschunkPlugin ({Name: ‘vendor’, minchunks (module) {// Any required modules inside node_modules are extracted to vendor return (module.resource && /\.js$/.test(module.resource) && module.resource.indexOf (path.join (__ dirname, ‘../node_modules’)) == = 0)}}), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin ({name: ‘manifest’, minChunks : Infinity}), // Precaming all modules into a closed package, new weight.optimize.commonschunkplugin ({name: ‘app’, async: ‘vendor-askOR-async’, children: true, minchunks: 3}, / / Copy, such as after packing, copy the packaged file to the Dist to new copywebPackPlugin ([{from: path.resolve (__ DIRNAME, ‘../static’), to: config.build.assetssubdirectory, Ignore: [‘. * ‘]}])]}) If (config.build.productionGzip) {const CompressionWebpackPlugin = require ( ‘compression-webpack-plugin’) webpackConfig.plugins.push (new CompressionWebpackPlugin ({asset: ‘[path] .gz [query]’ , Algorithm: ‘Gzip’, Test: New Regexp (‘\\. (‘ + config.build.productiongzipextensions.join (‘|’) + ‘) $’), Threshold: 10240, Minratio: 0.8})} / / provide a compressed version of the Content-encoding encoded with resource if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require ( ‘webpack-bundle-analyzer’). BundleAnalyzerPlugin webpackConfig.plugins.push (new BundleAnalyzerPlugin ())} module. Exports = WebPackConfig
   The above is all the contents of this article, I hope that everyone's learning is helpful, and I hope that everyone will support Tumi Clouds. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment