webpack学习笔记

入口和出口

  • 单个入口
    1
    2
    3
    4
    5
    module.exports = {
      entry: {
        main: './index.js',
      },
    };
  • 多个入口（数组）
    1
    2
    3
    4
    5
    6
    module.exports = {
      entry: ['./index1.js', './index2.js'],
      output: {
        filename: './dist/bundle.js',
      },
    };
  • 多个入口（对象）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // webpack.config.js
    module.exports = {
      entry: {
        main: './src/app.js',
        vendor: './src/vendor.js'
      }
    };

    // webpack.prod.js
    module.exports = {
      output: {
        filename: '[name].[contenthash].bundle.js',
      },
    };

    // webpack.dev.js
    module.exports = {
      output: {
        filename: '[name].bundle.js',
      },
    };

入口配置参数：

  • dependOn：当前入口所依赖的入口。它们必须在该入口被加载前被加载。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

module.exports = {
  output: {
    path: '/home/proj/cdn/assets/[fullhash]',
    publicPath: 'https://cdn.xxx.com/assets/[fullhash]/'
  }
};