webpack-entry&output

  webpack是静态模块打包器，可以递归的构建项目的依赖关系图。有4个重要的概念：

• entry（入口文件）
• output（出口文件）
• loaders
• plugins（插件）

本文首先介绍下entry和output：

entry

项目的入口文件，webpack中的默认值为’./src’，有2种写法：

• 简写：
  webpack.config.js

//entry: string|Array<string>
const config = {
    entry: path.join(__dirname, 'app/main')
}
//如果想添加互不依赖的多个文件，可使用数组格式
const config = {
    entry: ['app/main.js','aap/other.js']
}

• 对象写法

const config = {
    entry: {
        app: path.join(__dirname, 'app/main')
    }
}

对象写法可扩展性强，推荐使用，常用的使用场景有：

• 分离 应用程序(app) 和 第三方库(vendor) 入口

const config = {
    entry: {
        app: path.join(__dirname, 'app/main'),
        vendor:path.join(__dirname, 'app/vendor')
    }
}

  以上这种方式比较常见于只有一个入口起点（不包括 vendor）的单页应用程序中。
  如果在 app 中引用了 vendor，那么需要使用 CommonsChunkPlugin 插件。

• 多页应用

const config = {
  entry: {
    main: path.join(__dirname, 'app/main'),
    other: path.join(__dirname, 'app/other')
  }
};

多页应用与单页应用的配置基本相似，不同主要在于entry，另外，如果项目中用到了 抽离css样式的插件 extract-text-webpack-plugin，那么还需对这个插件进行改写。
extract-text-webpack-plugin 插件主要是为了抽离css样式，防止将样式打包在 js中引起页面样式加载错乱，多页面应用中，

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
    entry: {
        main: path.join(__dirname, 'app/main'),
        other: path.join(__dirname, 'app/other')'
    }，
    plugins: [
        new ExtractTextPlugin('main/[name].[contenthash].css'),
        new ExtractTextPlugin('other/[name].[contenthash].css')
    ]
}

output

webpack的出口文件，即使存在多个入口文件，也只能指定一个出口文件。

const config = {
  output: {
    filename: '[name].js',
    //webpack4中的path默认值即为'./dist'，可不用设置
    path: path.join(__dirname, 'dist')
  }
};