Four core concepts

Entry (entrance)

Entry is the entry to the entire configuration file.

Entry has two entrances and four configurations.

Two kinds of entrance

  • Single file entry
  • Multifile entry

Four types of configuration

  • Value is a string
  • The value for the object
  • The value as an array
  • function

Code demo

The first configuration (string) is mainly used in single-page applications

const { resolve } = require('path')
module.exports = {
  entry:resolve(__dirname,'src/index.js')
}
Copy the code

The second configuration (objects) is mainly used in multi-page applications

const { resolve } = require('path')
module.exports = {
  entry: {    test:resolve(__dirname,'src/index.js'),
    test2:resolve(__dirname,'src/index2.js')
 } } Copy the code

The third configuration (array), which is less likely to be used, is also used in single-page applications. This configuration mainly packs the 1-n items of an array into 0 items, sometimes used in JS-compatible, dynamically linked DLLS

const { resolve } = require('path')
module.exports = {
  entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')].}
Copy the code

The fourth configuration (function), the function simply returns one of the above three

const { resolve } = require('path')
module.exports = {
  entry:(a)= >'./src/index.js'.}
Copy the code

output

If there’s an entrance, there must be an exit! Just like people, they have to eat and poop. The exit here is where you put the packaged stuff.

Common configuration of output

  • Path (output location, default dist directory)
  • Filename (the milk name of the output file, default main)
  • PulibPath (specifies where the packaged file should be referenced. This is used in production environments. Default is null.)

Code demo


const { resolve } = require('path')
module.exports = {
  output: {    path:resolve(__dirname,'dist'),
 filename:'bundle.js'. publicPath:'http:baidu.com'  } }  Copy the code

Several configurations of filename can be directly written to death as above, or the filename can be dynamically set with a hash value, such as this


module.exports = {
  output: {    filename:'[name]_[hash].js'
  }
}  Copy the code

Hash value

Webpack provides the following hashes:

  • hash
  • Chunkhash (same chunk, same hash)
  • Contenthash (one file, one hash)

module

Module. rules is where the loader is configured to resolve some code compatibility issues.

Common configuration of module.rules

  • Test (Loader matching rule)
  • Exclude (exclude files that do not need to match)
  • Include (which files to match only)
  • Loader (Which loader to use, single)
  • Use (Which loaders to use, multiple)

Code demo

  module.exports = {
   module: {    rules: [      {
        test:/\.html$/. exclude:/node_modelus/. include:/src/. loader:'html-loader'. },  {  test:/\.css/. use: ['style-loader'.'css-loader']  }  ]  } } Copy the code

Common loader configurations

  • Loader (which loader to use)
  • Options (Parameters passed to loader, different loader, options parameters are different)

Code demo

module.exports = {
  module: {    rules: {      test:/\.js$/.      exclude:/node_modelus/. use: [ / / no parameters  'thread-loader'. / / a parameter  {  loader:'babel-loader'. options: { presets: ['@babel/preset-env']  }  }  ]  }  } } Copy the code

plugins

Plugins are places to configure plugins, which are an array, and plugins are mostly used for code optimization.

There is no universal usage of plug-ins, which varies from plug-in to plug-in. If they have anything in common, it’s new XXX

Some common loaders

CSS related

  • Style-loader (handles style inline styles)
  • Css-loader (processing.css files)
  • Postcss-loader (handles CSS compatibility)
  • Less-loader (processes.less files)
  • Sass-loader (handles.sass/.scss files)
let comment = [
  "style-loader".  "css-loader".  {
    loader:"postcss-loader". options: { postcssOptions: { plugins: ['postcss-preset-env']  }  }  } ] module.exports = {  module: { rules: [ {  test:/\.css/. use: [. comment ]  },  {  test:/\.less$/. use: [. comment, 'less-loader'  ]  }  ]  } } Copy the code

Js related

  • babel-loader
  • @babel/core
  • @babel/preset-env
  • @babel/polyfill
module.exports = {
  entry: ['@babel/polyfill'.'./src/index.js']
.  module:{
    rules: [ {  test:/\.js$/. use: [ {  loader:'babel-loader'. options: { presets: ['@babel/preset-env']  / / or  presets:[['env', {module:false}]]  }  }  ]  }  ]  } } Copy the code

Documents related to

  • url-loader
  • file-loader
  • html-loader
  module.exports = {
.    module:{
      rules: [        {
 test:/\.(png|jpg|gif)$/. use: [ {  loader:file-loader,  options: { limit:4 *1024. name:'img/[name]_[hash:10].[ext]'  }  }  ]  },  {  test:/\.html$/. loader:'html-loader'  }  ]  }  } Copy the code

Vue related

  • vue-loader
  • vue-style-loader
  module.exports = {
.    module:{
      rules: [        {
 test:/\.vue$/. loader:'vue-loader'  },  {  test:/\.css$/. use: [ 'vue-style-loader'. 'css-loader'  ]  }  ]  }  } Copy the code

To optimize the

The development environment

  • HRM (Thermal replacement)
  • Webpack-dev-server (local server)
  • Soure-map (debugging)
  • Webpack-bundle-analyzer (Package generated code block analysis view)
  • Size-plugin (Monitors volume variation of packaged resources)
  • Speed-measure -webpack-plugin (Analyze loader and plugin packaging time)

The production environment

Volume optimization

  • CSS Extract (Mini-CSS-extract-Plugin)
  • Optimize CSS compression (CSS-assets -webpack-plugin)
  • HTML compression (HTML-webpack-plugin)
  • Externals (excluding third parties that do not need to be packaged)
  • Js compression (Production mode starts automatically)
  • Tree-shake (Production mode automatically enabled (WebPack4 limited EsModule; Webpack5 open EsModule,CommonJs, excellent))
  • code-split ( optimization )
  • Import (lazy loading, preloading (caution with preloading))

Package speed optimization

  • Multithreaded packaging (Thread-loader, happyPack
  • Dynamic chain (DLL)
  • Babel cache (cache cacheDirectory)
  • Exclude/exclude (exclude some files that do not need to be compiled)
  • Module.noparse (excludes third-party libraries that do not need to be compiled by loader)

Pay attention to

  • Webpack optimization needs to see their own project situation to the right medicine, not see what is interesting to use up; If you dig a hole for yourself, you may also bury yourself.

other

  • Resolve (Configure how the module resolves)
  • More configuration, loader,plugin, etc., see the documentation for yourself