webpack简介及基本用法

什么是webpack

本质上webpack 是一个JavaScript 静态模块打包器，同时它还能处理非JavaScript模块；
利用webpack可以将我们的前端工程代码打包成适应于浏览器运行的代码；

webpack的基本概念

entry

entry(入口)用来指明webpack进行打包的入口文件；

output

output(输出)用来指明webpack打包后的bundles文件存放的路径；

loader

webpack自身只理解javascript文件，loader可以用来处理那些非javascript文件(或者说是模块)；

plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，如提取css、添加sourcemap功能、复制文件等；

webpack工作流程

了解了webpack作用及基本概念后，我们来看下webpack具体是怎么运用这些概念来进行工作的吧；工作流程如下图

webpack工作流程.png

首先通过执行webpack命令来进行打包；(一般我们会在package.json中配置类似build的脚本，然后通过 npm build间接执行webpack)
接着webpack会读取webpack.config.js文件进行参数初始化；
接着通过entry找到入口文件；
接着调用匹配到的loader处理入口文件，然后寻找文件的依赖文件继续调用loader处理；递归处理直至所有依赖都被处理完为止；
最终将处理完的文件输出；
这其中webpack会发出广播事件，相应的插件会接收广播事件来对打包过程进行额外的处理；

一个简单的webpack示例

该demo只是一个最基本的例子，真实项目上配置要比这个复杂的多
代码地址：https://github.com/shejiJiang/webpack-demo

以下是示例中webpack.config.js的内容，其中配置了打包的入口、输出的文件名及路径，同时配置了style-loader、css-loader两个loader来处理css文件；

const path = require('path');

module.exports = {

  // 配置入口为./src/index.js文件
  entry: './src/index.js',

  // 配置输出文件名、路径
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 通过module.rules配置loaders
  module: {
    rules: [
      {
        // 处理.css文件
        test: /\.css$/,
        // 使用style-loader、css-loader两个loader来处理
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

package.json文件配置了相应的依赖，以及build脚本

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "node_modules/.bin/webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^3.0.0",
    "lodash": "^4.17.11",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

index.html直接引用了打包后的js文件

demo用法：
yarn
yarn build
浏览器直接打开index.html文件