Webpack介绍-一切皆为模块

一,Webpack简介

Webpack是前端项目自动化构建工具之一
和gulp,grunt不同,Webpack不仅仅是web构建工具,也称作模块打包器
在webpack的世界中,一切皆为模块,所以要本着模块化的概念去使用webpack

中文文档:https://webpack.docschina.org/
官方文档对Webpack的定义:
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

---

二,Webpack模块和静态资源

Webpack依赖图:

左侧为依赖模块:
    箭头表明了模块间的依赖关系
    JS文件会依赖其他各模块(JS依赖CSS,CSS依赖图片)
右侧为打包后的静态资源
    Webpack根据模块的依赖关系进行静态分析，生成对应的静态资源

Webpack中,前端的所有资源文件(js/json/css/img/less等)都会作为模块处理
注意:左侧模块中并没有html,在Webpack的世界中html不是模块

---

二,Webpack的四个核心概念

1,入口(entry)

告诉webpack使用哪个模块作为构建其内部依赖图的开始
webpack会找出入口起点直接和间接依赖的模块和库
每个依赖项都会被webpack处理并输出到bundles文件
在webpack配置文件中可以配置一个或多个entry属性来指定入口起点,默认值为"./src"

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

2,出口(output)

告诉webpack将创建的bundles文件输出到哪里及如何命名这些文件，默认值为"./dist"
基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
可以在配置中通过output属性来配置处理过程：

webpack.config.js

// 一个 Node.js 核心模块，用于操作文件路径
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    // 指定bundle 的名称
    path: path.resolve(__dirname, 'dist'),
    // 指定bundle 生成的位置
    filename: 'my-first-webpack.bundle.js'
  }
};

3,加载器(loader)

Webpack只能加载Js和Json模块,当加载其他类型文件(模块)时,需要使用对应的loader进行转换
loader是运行在node.js环境中的JavaScript模块
loader是一个函数，输入源文件,输出转换结果
loader一般以xxx-loader方式命名，xxx代表loader的转换功能，如:json-loader
webpack-loader能将所有类型文件转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块

注意:在webpack1.x中只能加载js,不能加载json模块

webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
          // 需要被转换的文件类型
          test: /\.txt$/, 
          // 文件类型对应的转换器
          use: 'raw-loader' 
      }
    ]
  }
};

module.exports = config;

配置中，对一个单独的 module 对象定义了 rules 属性，包含两个必须属性：test 和 use。
当webpack发现,在 require()/import 语句中被解析为 ‘.txt’ 的路径时,打包前先使用raw-loader 转换

4,插件(plugins)

loader用于转换某些特定类型模块，而插件可用于处理各种各样的任务
插件帮助我们扩展一些功能,完成一些loader不能完成的工作
webpack 提供许多开箱可用的插件

webpack.config.js

// 通过require引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件
const webpack = require('webpack'); 

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  // 添加插件到 plugins 数组中,多数插件可以通过option选项自定义
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    // 通过new 获取插件的一个实例
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

---

三,Webpack的版本差异:

Webpack目前有1.x,2.x,3.x,4.x版本
2.x和3.x版本用法相同,3.x在2.x版本的基础上添加了新功能
1.x和3.x版本的属性和配置存在差异,所以最好不要混用

建议npm全局安装Webpack后,再在本地项目中安装一个项目要求的版本