WebPack概念

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
核心概念：

• 入口(entry)
• 输出(output)
• loader 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)

配置：

1.entry（入口）

entry: string|Array<string>
module.exports = {
  entry: './path/to/my/entry/file.js'
};

entry: {[entryChunkName: string]: string|Array<string>}--可扩展性强
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

2. 输出(output)：配置 output 选项可以控制 webpack 如何向硬盘写入编译文件

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};
// 写入到硬盘：./dist/app.js, ./dist/search.js