01-模块化历程
起初，js没有模块化概念，导致出现一些问题：
- 容易造成变量污染
- 文件之间的依赖关系模糊
浏览器端模块化：异步模块化规范
- require.js 是AMD规范 （异步模块化规范） 依赖前置
- sea.js 说CMD规范（通过模块化规范 异步） 依赖就近
Nodejs模块化：同步模块化规范
- CommonJS规范
- 导出：module.exports
- 导入：require
ES6模块化：同步模块化规范
- 默认导出 export default
- 导入 import xxx from ‘xxx’
在浏览器端无法使用，Es6的模块化，需要使用打包工具，将基于Es6的的模块打包在一起。
02-webpack-介绍
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
- webpack是基于Nodejs的命令行工具
- 默认的作用是打包JS模块资源，不需要对js文件进行导入导出操作
- 当然配置加载器后，可以打包所有类型的资源文件。
- 也通过安装插件，可以对输出结果进行修改。
- 最后可以支持项目开发环境，提供服务器功能(localhost)。
学习目的：
- 了解webpack这个工具基础使用
- 基于vue-cli可以自行修改一些默认配置
03-webpack-安装
全局安装：
npm i webpack -g
npm i webpack-cli -g
- 安装后，可以在全局使用命令
webpack，但是不建议全局安装，因为各个项目依赖的版本不一样，全局更新后将影响，其他版本的项目。
推荐本地项目单独使用：
注意：本地项目文件夹的命名不可以是webpack或webpacks，否则安装不成功
- 初始化项目 配置package.json的文件
npm init -y
- 安装 --save-dev 简写 -D 安装到开发依赖
npm i webpack -D
npm i webpack-cli -D
- node_modules下配置package.json
{
"scripts":{
//"start":"nodemon app.js",
"build":"webpack"
}
}
- 调用webpack工具
npm run build
第一次使用webpck打包：必须有src目录，默认入口文件是index.js。
04-webpack-打包模式（mode）
- 需要在配置文件下进行配置
- 默认的配置文件名称是：webpack.config.js
module.exports = {
//development 开发模式打包 代码不压缩，打包速度快 没做优化处理
//production 生产模式(线上运行)打包 打包速度慢 做了一些优化处理，压缩
mode: 'development' // 开发模式打包
}
05-webpack-入口与出口
- 默认入口是 src下的index.js文件,注意引入时的路径
- 默认出口是 dist 目录下的 main.js 文件–是一个默认的压缩文件
src/index.js入口文件：
默认的配置文件是：webpack.config.js
//配置绝对路径
const path = require('path');
module.exports = {
// 打包的入口文件 默认加载./src/index.js
entry: './src/index.js',
// 打包结果的输出的出口文件 文件夹默认生产=成文件夹dist
output: {
// 必须指定的是绝对路径
path: path.join(__dirname, './dist'),
filename: 'main.js'
}
};
- 在命令行中，输入如下，检测是否打包成功
npm run build
webpack文件配置目录：
