Webpack-basic development documentation

Making a link

instruction

  • npm run serverStart the development environment server
  • npm run devStart the Development environment build (uncompressed code, unseparated code (extract reusable modules), keep source-map)
  • npm run prodStart production environment build (code compression, code separation, source-map removal)
  • npm run startStart a local server with the dist directory as the root
  • npm run analysLaunch Build analysis and launch a visual build data analysis site

IS_DEV

SRC the global variable in the development directory true is the development environment and false is the production environment

Import dynamic loading

import('vconsole').then(({default: VConsole}) = >{
  this.Console = new VConsole();
})
Copy the code

Webpack loads links dynamically

pages

Configure HTML and entry files for multiple pages

app.config.js

module.exports = {
  pages: [{name: 'index'.// Chunk name (HTML,js, CSS names for output)
      html: 'pages/index/index.html'.// HTML file path
      entry: 'pages/index/index.js'// HTML corresponds to the entry file},... ] }Copy the code

expose

Expose is used to expose modules to global variables. This feature is useful for supporting libraries that depend on other global libraries.

app.config.js

module.exports = {
 expose: [{module_name: 'jquery'./ / module name
      name: ['jquery'.'$']./ / variable names
    },
    {
      module_name: 'PxLoader'./ / module name
      name: ['PxLoader']./ / variable names},... ] }Copy the code

Note: modules must be required () in your bundle or they will not be exposed.

assets

Resource management, these are the default configurations

app.config.js

module.exports = {
 assets: {
   // Convert images up to 5KB into Base64
   limit: 5 * 1024.// Build the resource output directory
   outputPath: ' '.// Build resource output path (used as CDN) is empty by default
   publicPath: ' '
   // publicPath: 'http://localhost:8080/images'}}Copy the code

hash

We know that browsers have caching mechanisms to optimize the experience. If the browser determines that the current resource is not updated, it will not download the resource from the server and will use the local resource directly. In webpack builds, we usually solve the problem of new resource caching by adding suffix values to files to rename them and extracting common code into unchanging lib packages. First let’s look at how file names work. Introduce the hash

app.config.js

module.exports = {
 /** * Resource hash value, anti-browser cache, client not updated * None: no hash enabled * syntax -- * hash: Hash is related to the construction of the entire project. Whenever a file changes in the project, the hash value of the entire project will change, and all files will share the same hash value * chunkhash: Chunkhash parses dependent files according to different entry files, builds corresponding chunks, and generates corresponding hash values. * Contenthash: A new hash value will be generated if the file content changes. * :Number is the hash length. * - Is the direct concatenation of the file name and hash
 hash: '-[contenthash:4]'/ / the default value
}
Copy the code

drop_console

Whether to remove console when building in production defaults to True

app.config.js

module.exports = {
 drop_console: false
}
Copy the code

proxy

Solve the cross-domain interface in the development environment

app.config.js

module.exports = {
 proxy: {
   '/common': {
     // Specify the development environment proxy domain
     target: 'http://tool.h5-x.com'.Prod is preferred in production mode. Target is used when prod has no value
     prod: 'http://tool.h5-x.com'.// Whether the development environment is cross-domain
     changeOrigin: true.// Rewrite the path
     pathRewrite: { '^/common': ' '}}}}Copy the code

Note: strings starting with /common are matched by the rule.

outputPath

Build the output directory

app.config.js

module.exports = {
 // outputPath: '/dist' to build to the dist directory on the current disk
 // outputPath: 'D:/dist' to build to the dist directory on disk D
 // outputPath: 'dist', built to the dist default in the current working directory
}
Copy the code