webpack

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

webpack五个核心概念

Entry

• 入口(Entry)指示webapck以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

• 输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

Loader

• Loader让webpack能够处理哪些非JavaScript文件（webpack自身只理解JavaScript）

Plugins

• 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括：从优化和压缩、一直到重新定义环境中的变量。

Mode

• 模式指示webpack使用相应的模式配置。

安装

• 初始化

  npm init -y

全局安装

• 使用版本webpack@4.29.5 webpack-cli@3.2.3

   npm install webpack webpack-cli -g

   webpack -v //验证是否安装成功

本地安装

• 安装（-D表示开发依赖）

  npm add webpack webpack-cli -D

初始化项目

  npm init -y 或者 npm init

hello word

首先在新建立的demo文件夹中初始化项目，然后安装webpack和webpack-cli,建立一个src/index.js文件，然后再建立一个打包后的输出文件：dist/index.html，最后建立webpack.config.js。大致目录结构如下：

  demo
    --dist
    ----index.html

    --src
    ----index.js

    --webpack.config.js
    --package.json
    --package-lock.json

• 打开src/index.js,随便写点什么,然后在dist/index.html中引入一下：

    //src/index.js
    console.log('hello world');

    //dist/index.html
    <script src="index.js"></script>

• 打开webpack.config.js文件，先写一些基本的配置：

  module.exports={
      // 入口文件
      entry:'./src/index.js',

      // 出口
      output:{
          path:__dirname+'/dist',
          filename:'index.js'
      },
      // 关于loader 配置
      module:{

      },

      //插件的配置
      plugins:[],

      // 服务器的配置
      devServer:{

      }
  }

• 这时候在终端输入webpack即可打包，可以看到在dist文件夹下生成了一个index.js,打开dist/index.html,控制台也顺利输出hello world。

tips

关于输出路径，__dirname是node的一种方法，指的就是当前模块的目录，所以在输出路径中我们使用__dirname+'dist'。除此之外，还可以使用下面这种方法：

  const path=require('path');
  module.exports={
      // 入口文件
      entry:'./src/index.js',

      // 出口
      output:{
          path:path.resolve(__dirname,'dist'),
          filename:'index.js'
      },
      // 关于loader 配置
      module:{

      },

      //插件的配置
      plugins:[],

      // 服务器的配置
      devServer:{

      }
  }

修改webpack.config.js文件名字

webpack.config.js文件名字也是可以进行修改的，只是执行时候命令有所改变,比如吧webpack.config.js改为demo.config.js,执行时候如下：

    webpack --config demo.config.js