本文共 5009 字，大约阅读时间需要 16 分钟。

Webpack������������

������������

Webpack ������������������������������������������������������������������������������������ JavaScript���CSS���������������������������������������������������������������������������������������������

Webpack������

Webpack ������������������������������������������������������������������������������������������ bundle���������������������������������������������������������������������������������������������������������������������������������

Webpack������������

1. Entry point(���������)

-Webpack ��������������� entry point ������������������������������������

entry: {
  app: './app.js'
}

��������������������������� entry point ������������������������������������������������������

2. Output(������)

Webpack ��������������������������������������������������� output.js ��� CLI ������������������������������

• path ������������������
• filename ���������������������
• chunkFilename ���������������������������
• library ������������ npm ������������������

3. Module resolution(������������)

Webpack ��������������� resolve ��� webpackNodejs ������������������������������������ Node.js ���������������������������������������������������������������

Webpack���������

��������������� Webpack ������������������������������������������ devServer��������� Webpack ���������������������������������

npx webpack dev

������������������������������������������

• devServer ��������������� webpack.config.js ��� webpack.js ������
• ������ https:// URL ������������������������������������

������������������

CSS ��������������� Webpack ���������������������������������������

������������������������

������������������ webpack loader

// webpack.config.js
const styles = {
  main: './src/app.css'
}
module.exports = {
  module: {
    rules: {
      styles: {
        test: /\.css$/,
        use: 'css-loader'
      }
    }
  }
}

HTML ������������

������ html-webpack-runtime ��� CLI ��������������� HTML ���������

npx webpack src/html.html

������������������������ optimize ��� HTML ���������������������������������������������

������������������

��������� Webpack ���������������������������������������������������������������

���������������

const imgLoader = {
  test: /\.png$/,
  use: 'image-webpack-loader'
}
module.exports = {
  module: {
    rules: [
      imgLoader
    ]
  }
}

������������������

1. ������������

• ������ source-map ���������������������������
• ������ webpack-sourcemap ���������������

2. Websocket

• ������ websocket-loader ������ Websocket ������������������
• ������������ express ��� YoYo generator ������ WebSocket ���������

3. ������ IP ������

• ������ webpack-dev-server ��� lazy-eslint ������������������������������

devServer ������������

npx webpackserve src/

���������������

• host: 'localhost'
• port: 3000
• content Lugging On
• Hot Module Replacement (HMR)

������������������

const config = {
  devServer: {
    host: '0.0.0.0',
    port: 80,
    hot: true,
    historyApiFallback: true
  }
}
module.exports = merge(baseConfig, config)

������������������

������������ webpack-merge ��� webpack.prod ��� Encode ������������������

const baseConfig = {
  entry: './app.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: './dist/'
  }
}
const prodConfig = {
  name: 'app',
  optimize: true,
  extract: true,
  min lever: 2,
  chunk LibrarY: true,
  source map: true,
  devServer: false,
  node T������������������: '/server'
}
module.exports = merge(baseConfig, prodConfig)

������������

1. HMR ���������������

��������������� HMR ���������������������������

2. ���������

���������������������������������������������

3. ������������

• ������������������ splitPoint ��� chunking
• ������������������ extractoring

4. Source map

���������������������������������������������

������ Webpack ������

1. EntryPoint ������

������������������������������

entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
}

2. ������������������

���������������������

output: {
  app: './dist/app.js',
  vendors: './dist/vendors.js'
}

3. Module ������

• ���������������������

module: {
  noParse: /platform/,
  exprTarget: '������������',
  wrapped booth False,
  strict mode: true
}

4. DevServer ������

devServer: {
 .static: './public',
  contentNotFound: true,
  writeToDisk: true
}

5. ������������

optimization: {
  concatenated_library: false,
  minimize: isn't JS/CSS, symlinks: true
}

Webpack 5

������4.x���5���������������������������

• ��������������������������������� 10-15%���
• ��������������������� tree Shaking���
• ��������� module Aliases ��� BaseController ������������
• ��������� ES6+ ���������������������������������

������

Webpack ������������������������������������������������������������������������������������������������������������������������������������������������������������������