单文件

下面的书写会将index.js文件打包为名称是bundle.js的文件，如果不加filename: 'bundle.js'这句话，打包生成的文件名为main.js，名称是entry对象键的名字

简写

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

非简写

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

多文件

下面的代码会将index.js文件打包两次，分别生成main.js 和 sub,js两个文件

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    sub: './src/index.js',
  },
  output: {
    filename: '[name].js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

增加前缀

当打包完成后，使用了插件后，生成的HTML文件会自动引入打包后的文件，如果想为引入的文件增加前缀

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    sub: './src/index.js',
  },
  output: {
    publicPath: 'http://hello.me', // 前缀
    filename: '[name].js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

打包文件夹

通常情况下，配置文件会放在build文件夹下，所以出口的打包文件夹位置需要修改为和build同一层级，不然会放在build目录下

  output: {    
    path: path.resolve(__dirname, '../dist')  // 文件夹
  }

文档

entry
output　output-management

网站导航

网站导航