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文件配置目录: