WebPack 文件配置

1. 什么是WebPack

WebPack 可以看作是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass, TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在webpack3.0出现以后，webpack还肩负起了优化项目的责任。

关键词分析：

打包：可以把多个JavaScript文件打包成一个文件，减少服务器压力和下载宽带。
转换：把扩展语言转化成为普通的JavaScript，让浏览器顺利运行。
优化：前端变得越来越复杂后，性能也会遇到问题，而webpack也开始肩负起优化和提升性能的责任。

2. 安装webpack

进入终端：

mkdir webpack_demo // 新建webpack_demo文件夹
cd webpack_demo // 进入webpack_demo文件夹

全局安装webpack

npm i -g webpack
安装完成之后终端输入webpack便可运行。如果安装失败，失败原因可能：

没有安装node;
linux和mac需要权限;
网络差，建议使用cnpm(淘宝镜像)

但是，webpack官方并不建议使用全局安装，全局安装之后后期项目维护可能会出现一些问题，比如，每个项目的webpack版本可能会不一样
所以，我们学习一下如何对项目进行安装：
在项目中打开终端，命令行输入
npm init -y
这个命令执行完之后，可以在项目中看到新增了一个package.json文件。
再输入下面的命令进行安装：
npm i -D webpack // -D --save-d的缩写，表示安装到开发环境
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。
安装完成之后运行命令：webpack -v可以直接查看webpack版本号

3. webpack 文件配置

webpack四个核心概念

入口（entry)

入口起点（entry point）指示 webpack 应该使用那个模块来作为构建其内部依赖图的开始。进入入口七点后，webpack会找出有哪些模块和库是入口七点（直接或间接）依赖的。

输出 (output)

出口文件的配置项

loader

loader 用于对模块的源代码进行转换。loader可以使你在import或者“加载”模块时预处理文件。因此，loader类似于其它构建工具中“任务（task）”，并提供了处理前端构建不走的强大方法。loader可以将文件从不同的语言（如TypeScript）转换为javascript，或将内联图像转换成 data URL。loader甚至允许你直接在JavaScript木块中import CSS文件

插件 (plugins)

插件是webpack的支柱功能。用于生产模块和各项功能。

3. 入口配置和出口配置

在项目根目录新建webpack.config.js文件

module.exports = {
  // 入口文件配置项
  entry: {},
  // 出口文件配置项
  output: {},
  // 模块：例如解读CSS，图片如何转换，压缩
  module: {},
  // 插件，用于生产模块和各项功能
  plugins: [],
  // 配置webpack开发服务功能
  devServer: {}
}

entry: 配置入口文件的地址，可以是单一入口，也可以是多入口；
output：配置出口文件的地址，在webpack2.x版本后，支持多出口配置；
module：配置模块，主要解析CSS和图片转换压缩等功能；
plugins：配置插件，根据你的需要配置不同功能的插件；
devServer：配置开发服务功能。

1. entry（入口配置）

  // 入口文件的配置项
  entry: './src/app.js'

2. output(出口配置)

  // 出口文件配置项
  output: {
    // 打包的文件路径
    path: path.resolve(__dirname, 'dist'),
    // 打包的文件名称
    filename: 'bundle.js
  }

此处用到了path,所以需要在文件中引入path

  const path = require('path')

path.resolve(__dirname, 'dist')获取项目的据对路径
filename: 打包后的文件名称
3. 多入口、多出口的配置

  const path = require('path')
  module.exports = {
    // 入口文件配置项
      entry: {
       entry:  './src/entery.js',
        entry1:  './src/entery1.js'
      },
    // 出口文件配置项
      output: {
        // 输出的路径，用了Node语法
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名称
        filename: '[name].js'
      },
    // 模块，例如解读CSS，图片如何转换，压缩
      module: {},
    // 插件，用于生产模板和各项功能
      plugins: [],
    // 配置webpack开发服务功能
      devServer: {}
  }

[name].js: [name]的意思是根据入口文件的名称，打包成相同的名称。

4. plugins插件

我们一般会将项目打包成html文件，此时，我们就需要用到html-webpack-plugin插件，首先，使用命令npm i -D html-webpack-plugin安装,在webpack.config.js中配置
首先引入插件

const HtmlWebpackPlugin = require("html-webpack-plugin")

plugins: [
  new HtmlWebpackPlugin({
     filename: "main.html",      // 打包后的html文件名称，自定义
     template:  "./src/index.html"        // 源模板文件
  })
]

配置多个html文件

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index1.html",
      template: "./src/index.html"
    }),
    new HtmlWebpackPlugin({
      filename: "index2.html",
      template: "./src/index.html"
    }),
    new HtmlWebpackPlugin({
      filename: "index3.html",
      template: "./src/index.html"
    })
  ]

html-webpack-plugin还有很多配置项，可参考文档

5. loader（以js为例）

首先，npm i -D bable-loader安装babel-loader

module:{
  rules: [{
    test: /\.js$/,
    loader: 'bable-loader'
  }]
}