webpack.jpg
1.1什么是WebPack
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundle，将其打包为合适的格式以供浏览器使用。
webpack构建：构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。
1.代码转换：TypeScript 编译成 JavaScript、SCSS或Less 编译成 CSS 等。
2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3.代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4.模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器,nodemon。
6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力,更加方便了我们的开发。
1.2 什么是 webpack 模块
- ES2015 import 语句
- CommonJS require() 语句
- AMD define 和 require 语句
- css/sass/less 文件中的 @import 语句
- 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接
详细请看官网文档： Modules MODULES
1.3 搭建Webpack环境
- 去官网下载node
// 查看node版本号
node -v
// 查看npm版本号
npm -v
1.4 初始化项目
mkdir webpack-test
cd webpack-test
//初始化webpack配置清单package.json
npm init -y //-y会使用默认配置，不会中断询问
1.5 安装webpack
- 不推荐：
//全局安装，因为如果有两个项目用了webpack不同版本，就会出现版本不统一运行不起来的情况。只有卸了当前版本安装对应版本非常麻烦。
npm install webpack webpack-cli -g
//查看版本
webpack -v
//全局卸载
npm uninstall webpack webpack-cli -g
- 推荐使用：
//在项目里安装webpack。可以在不同项目中使用不同的webpack版本。
cd webpack-productname
npm install webpack webpack-cli -D
//查看版本
npx webpack -v
//查看对用包的详细信息
npm info webpack
//安装指定版本包
npm install webpack@4.16.1 webpack-cli -D
webpack-cli：使我们们可以在命令行里正确的使用webpack
1.6 webpack的配置文件
webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。
在项目根目录下创建 webpack.config.js 文件，这是webpack默认配置文件
const path = require('path')
module.exports = {
//默认是production，打包的文件默认被压缩。开发时可以设置为development，不被压缩
mode:'production',
//打包项目的入口文件
entry: './index.js',
//打包项目的输出文件
output: {
//自定义打包输出文件名
filename:'bundle.js',
//输出文件的绝对路径
path: path.resolve(__dirname,'bundle')
}
}
也可以自己指定配置文件来完成webpack的打包：
npx webpack --config + 自定义配置文件
网友评论