Webpack

Webpack本质是一个Js应用程序的静态模块打包器，它为前端的工程化开发提供了一套相对容易和完整的解决方
案，当webpack处理应用程序的时候，它会递归构建一个依赖关系图，然后进行打包任务
webpack有四个核心概念：entry、output、loader、plugins

一、entry(简单概念)

entry作为webpack起始的入口，告诉webpack我的应用程序是从何处开始，entry的配置可以一个或多个起点
示例:

// 单入口
    entry: './src/main.js' // 你可以这样
    entry: { main : './src/main.js' } // 你还可以这样
    // 多入口
    entry: { main : './src/main.js', vendors: './src/lib/vendors.js' } // 你可以这样
    entry: { main : './src/main.js', vendors: './src/lib/vendors.js' } // 你还可以这样

二、output(简单概念)

output作为webpack起始的出口，告诉webpack我的应用程序打包后的文件如何安置
示例:

// 分别对应是否多入口打包
    output: { filename : 'app.js', path: './build/assets/js' }
    output: { filename : [name].js, publicPath: '/assets/',path: __dirname + '/build/assets/js' }
    output: { filename : [name].[chunkhash].js, publicPath: '/assets/',path: __dirname + '/build/assets/js' }

3.loader(我认为的核心)

loader用于对模块代码进行转换，如果使用Angular2，采用TypeScript进行编写，那么打包时就需要转为
JavaScript，亦或是我们的代码中采用scss less，那么都需要进行转换
示例:

// 分别对应是否多入口打包
    module: {
        rules: [
          { test: /\.ts$/, use: 'ts-loader' }
        ]
   }

4.plugins(我认为的核心)

plugins其实是弥补了一些loader无法完成的事情，比如压缩
示例:

// 分别对应是否多入口打包
    plugins: {
        new webpack.optimize.UglifyJsPlugin()
   }

这样看起来，是不是webpack很简单，好像没有很难