webpack(模块打包器)（webpack模块打包原理）

webpack的简介和安装

官网：
https://doc.webpack-china.org/

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起, 打包后的文件用于在浏览器中使用, 但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)

全局安装webpack工作流工具：

npm install -g webpack@3

webpack有4代版本, 优点是：打包合并文件速度快, 快了90%。

webpack基本使用

在项目文件夹中运行CMD命令, webpack打包命令：

webpack main.js all.js

main.js是主入口文件

all.js 是出口文件(被打包的)

没有yuan.js的事情, 因为在main.js中import {mianji} from "./yuan.js"; 所以webpack就链着import寻找yuan.js进行打包合并。

webpack.config.js文件

在项目中的根目录写webpack.config.js文件, 来指导webpack工作, 如同.babelrc文件一样, 指导babel工作。

webpack.config.js文件的配置：

https://webpack.docschina.org/configuration/

先配置一个文件, 以后用就行了：

const path = require('path');
module.exports = {
//程序的入口文件
entry:"./www/app/main.js",
//程序的出口（配置打包编译后的资源）
output:{
//打包文件输出的路径
path: path.resolve(__dirname, "./www/dist"),
//打包文件的名称
filename: 'all.js'
},
//自动监听文件的变化
watch:true
}

webpack.config.js文件配置好后，就可以使用webpack命令打包了。

babel-loader

webpack只是帮我们智能合并打包文件, 但是没有翻译ES6、7、8语法为ES5语法。

所以现在的任务是, 在webpack打包的过程中, 对每一个js文件用babel进行翻译。

webpack提供了babel-loader功能, 可以让webpack在打包文件时, 顺便的翻译ES678语法。

安装依赖：

npm install --save-dev babel-core@6
npm install --save-dev babel-loader@7
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-es2016

babel-core 是babel的核心

babel-loader 是babel和webpack一起使用的桥梁

babel-preset-es2015 是翻译的字典

注意：babel-loader默认安装的是8代版本, 但babel-core默认安装的是6, 所以版本不兼容, 会报错。解决方法是babel-loader降级安装7代, 或者babel-core升级安装为7代。

安装完3个依赖, 并配置好webpack.config.js文件后, webpack不但能打包, 还能翻译了。

webpack.config.js文件配置

const path = require('path');
module.exports = {
//配置程序的入口资源
entry:"./www/app/main.js",
//程序的出口（配置打包编译后的资源）
output:{
//打包文件输出的路径
path: path.resolve(__dirname, "./www/dist"),
//打包文件的名称
filename: 'all.js'
},
//监听文件的变化（自动打包）
watch:true,
//资源处理，配置webpack模块插件、loader等
module:{
//关于模块的配置规则
rules:[{
// 模块规则（配置 loader、解析器等选项）
test: /\.js$/, //解析的时候匹配js文件
loader:"babel-loader",
//翻译什么文件夹中的文件
include: [ path.resolve(__dirname, "www/app")],
//不翻译什么文件夹中的文件
exclude: [ path.resolve(__dirname, "node_modules")],
//配置翻译语法
options:{
presets:["es2015","es2016"]
}
}]
}
}

之前写的.babelrc文件, 现在webpack在webpack.config.js文件中提供了，所以可以删除了。