This is the 24th day of my participation in the August Text Challenge.More challenges in August

entry

Entrance to the starting point

string

A single entry is packaged to form a chunk. Output a bundle file. The default name of chunk is main

'./src/index.js'
Copy the code

array

All the import files of multiple entries form only one chunk, and only one bundle file is exported. HTML hot updates only work in the HMR function

['./src/index.js'.'./src/add.js']
Copy the code

object

Multiple entries Several entries form several chunks and export several bundle files. The name of the chunk is key

// Special usage {// All incoming files end up as a chunk, and only one bundle is exported. Index: ['./ SRC /index.js', './ SRC /count.js'], // form a chunk and output a bundle file. add: './src/add.js' }Copy the code

Pseudo code

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: ['./src/index.js'.'./src/count.js'].add: './src/add.js'
  },
  output: {
    filename: '[name].js'.path: resolve(__dirname, 'build')},plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};
Copy the code

output

You can configure the Output option to tell WebPack how to write compilation files to hard disk. Note that even though more than one entry starting point can exist, only one output configuration can be specified.

filename: file name (specified name + directory)
path: output file directory (common directory for future output of all resources)
publicPath: common path prefix for all resources –> ‘imgs/a.jpg’ –> ‘/imgs/a.jpg’
chunkFilename: The name of a non-importing chunk

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'js/[name].js'.path: resolve(__dirname, 'build'),
    publicPath: '/'.chunkFilename: 'js/[name]_chunk.js'.// library: '[name]', // the name of the variable exposed throughout the library
    // libraryTarget: 'window' // To which browser the variable name is added
    // libraryTarget: 'global' // to which node the variable name is added
    // libraryTarget: 'commonjs'
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};
Copy the code

module

Module is used to configure how modules are handled.

Loader is used to convert the module source code. Loader allows you to preprocess files when importing or “loading” modules.
Rules Configures the read and parse rules of the module. Each item corresponds to a different configuration rule. Then the Use configuration item is used to apply the Loader
Exclude: exclude the JS files in the XXX folder
Include: checks only js files under SRC
Enforce: ‘pre’ takes precedence
Enforce: ‘POST’ execution postponed

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'js/[name].js'.path: resolve(__dirname, 'build')},module: {
    rules: [
      // Loader configuration
      {
        test: /\.css$/.// Multiple loaders use use
        use: ['style-loader'.'css-loader'] {},test: /\.js$/,
        exclude: /node_modules/,
        include: resolve(__dirname, 'src'),
        // Priority execution
        enforce: 'pre'.// The execution is delayed
        // enforce: 'post',
        // Single loader uses loader
        loader: 'eslint-loader'.options: {}}, {// Only one of the following configurations takes effect
        oneOf: []}]},plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};
Copy the code

resolve

Resolve configures how Webpack finds the files for the modules that depend on it, starting from the configured entry module. Webpack built-in JavaScript modular syntax parsing capabilities, the default will use the modular standard agreed rules to find.

alias: Configure the path alias of the resolution module: Advantage short path Fault path is not displayed
extensions: Indicates the suffix of the omitted file path
modules: tells WebPack which directory the parsing module is looking for

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js'.output: {
    filename: 'js/[name].js'.path: resolve(__dirname, 'build')},module: {
    rules: [{test: /\.css$/,
        use: ['style-loader'.'css-loader']]}},plugins: [new HtmlWebpackPlugin()],
  mode: 'development'.// Parse the module's rules
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')},extensions: ['.js'.'.json'.'.jsx'.'.css'].modules: [resolve(__dirname, '.. /.. /node_modules'), 'node_modules']}};Copy the code

DevServer

DevServer is the WebPack development server

contentBase: Directory to run the code
watchContentBase: Monitors all files in the contentBase directory and reload them if they change
compress: Enables Gzip compression
port: the port number
hostDomain names:
open: Automatically opens the browser
hot: Enables the HMR function
clientLogLevel:
quiet: Do not display anything except some basic startup information
overlay: If something goes wrong, don’t give a full screen prompt
proxy: server proxy

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js'.output: {
    filename: 'js/[name].js'.path: resolve(__dirname, 'build')},module: {
    rules: [{test: /\.css$/,
        use: ['style-loader'.'css-loader']]}},plugins: [new HtmlWebpackPlugin()],
  mode: 'development'.resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')},extensions: ['.js'.'.json'.'.jsx'.'.css'].modules: [resolve(__dirname, '.. /.. /node_modules'), 'node_modules']},devServer: {
    // Directory to run the code
    contentBase: resolve(__dirname, 'build'),
    // Monitor all files in the contentBase directory and reload them if they change
    watchContentBase: true.watchOptions: {
      // Ignore the file
      ignored: /node_modules/
    },
    // Start gzip compression
    compress: true./ / the port number
    port: 5000./ / domain name
    host: 'localhost'.// Automatically open the browser
    open: true.// Enable HMR
    hot: true.// Do not display startup server logs
    clientLogLevel: 'none'.// Do not display anything except some basic startup information
    quiet: true.// If there is an error, do not send a full-screen message ~
    overlay: false.// Server proxy --> Resolve cross-domain issues in the development environment
    proxy: {
      // Once devServer(5000) receives a request for/API/XXX, it forwards the request to another server (3000).
      '/api': {
        target: 'http://localhost:3000'.// the request path is rewritten: / API/XXX --> / XXX (/ API)
        pathRewrite: {
          '^/api': ' '}}}}};Copy the code

optimization

Starting with WebPack 4, different optimizations will be performed depending on the mode you choose, but all optimizations can be manually configured and rewritten.

SplitChunks: dynamic import modules, using the new generic chunking policy runtimeChunk provided by WebPack V4 + by default: An additional chunk minimizer with Runtime only is added for each entry: allows you to override the default minimizer by providing one or more instances of the customized TerserPlugin.

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/js/index.js'.output: {
    filename: 'js/[name].[contenthash:10].js'.path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
  },
  module: {
    rules: [{test: /\.css$/,
        use: ['style-loader'.'css-loader']]}},plugins: [new HtmlWebpackPlugin()],
  mode: 'production'.resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')},extensions: ['.js'.'.json'.'.jsx'.'.css'].modules: [resolve(__dirname, '.. /.. /node_modules'), 'node_modules']},optimization: {
    splitChunks: {
      chunks: 'all'
      // The default value is not ~
      MaxSiza: 0, // Max minChunks: 1, // Chunks to be extracted must be referred to in at least one time. MaxAsyncRequests: MaxInitialRequests: 3, // maxInitialRequests: 3, // automaticNameDelimiter: '~', // name connecter name: True, // Groups that split chunks // node_modules files are packaged into vendors group chunks using the naming convention cacheGroups: {// Vendors group chunks can be vendors group chunks. --> vendors~xxx.js // Satisfy the common rules above, e.g., be larger than 30KB and be referenced at least once. Vendors: {test: /[\\/]node_modules[\\/]/, // Priority: -10}, default: {// Chunks to be extracted are referenced minChunks at least 2 times: 2, // Priority: -20, // If the current module to be packaged is the same module that has already been extracted, it will be reused instead of reuseExistingChunk: true}}*/
    },
    // Package the hash of the current module into a single file runtime
    // Resolve: Modifying file A causes file B's contenthash to change
    runtimeChunk: {
      name: entrypoint= > `runtime-${entrypoint.name}`
    },
    minimizer: [
      // Configure the compression scheme for the production environment: JS and CSS
      new TerserWebpackPlugin({
        // Enable caching
        cache: true.// Enable multi-process packaging
        parallel: true./ / start the source - the map
        sourceMap: true}}})];Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Webpack common configuration details

entry

output

module

resolve

DevServer

optimization

Webpack common configuration details

entry

output

module

resolve

DevServer

optimization

Related Posts

Midway + VUE – CLI Separates the front and back end frameworks from zero build deployment

React Performance optimization: Principles for using PureComponent

Mobile adaptation – Practice