Webpack

一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】

gruntgulp ( 4.x )Browserify ( Webpack 前身 )Webpack 【 主流行 】rollup.js /guide/zh 【 小众 】parcel 【 小众 】FIS / 【 小众 】

二、前端工程化工具的发展历程

gruntgulp ( 4.x ) 流的操作 .pipe()Browserify ( Webpack 前身 ) 没有兼容模块化问题（ es6 ）Webpack 【 主流行 】 自动解决模块依赖性问题

三、 Webpack版本的发展过程

​ 官网: /

​ 中文: /

webpack1

​ 支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。

webpack2

​ 支持ES Module，分析ESModule之间的依赖关系，

​ webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking

webpack3

​ 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；

​ webpack3以上基本上都可以解决es6提出的模块化

webpack4

​ 可以解决es6模块化【 export default / export import 】

​ 更多个功能性 pulgin【 插件 】 和 loader 【 转换器 】

​ 前端框架中广泛使用： Angular Vue React 的脚手架都是由webpack来进行开发、管理

cli是自动构建一个项目，下面是通过webpack自主构建一个项目

目标：⭐

​ - 通过webpack自主构建一个项目 【手动构建一个项目】

webpack基本配置webpack高级配置

四、 Webpack涉及到的前端环境问题

Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件

Webpack的模块化书写的规范是Common.js规范

环境支持： Node.js 8+

⭐前端环境：【 重点 】

开发环境 - 无法直接在服务器中去运行生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行 unit test 单元测试 【 mocha Jest 】e2e 端到端测试 预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）

核心关注点在：

开发环境生产环境

五、Webpack的安装

安装可以使用任何一个包管理器： npm yarn cnpm

yarn > cnpm > npm

举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错

解决： 覆盖安装

cnpm || yarn 进行覆盖安装

cnpm 和 yarn 优先级没有那么绝对,有时cnpm比yarn高，有时反之

文件中首先需要package.json文件，所以要$cnpm init -y

1.全局安装( 选择以下一种即可 )

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

2.局部安装

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

局部优先级 > 全局

装了局部，如果使用webpack命令后发现报错说找不到webpack，那么再把全局也装上。

六、Webpack的概念

webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle（ 分块束 ）

理解： ⭐⭐

​ 举例： 我们有两个模块，A模块引用B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而打包B模块

七、Webpack 使用

默认源代码开发目录为： src

默认的入口文件名称为： src/index.js

默认出口目录为： dist

默认出口打包文件名称为： main.js

通过mode来设置是哪个环境下打包使用：

webpack --mode development 开发环境打包

webpack --mode production 生产环境打包

【开发环境打包： 代码不经过压缩、注释不会被删除】

eval 这个方法时用来解析字符串，这个字符串里面有js代码 【 性能不太好 】

1.终端命令行使用

安装了webpack 和webpack-cli后，全局命令中就多了一个webpack命令

终端运行 webpack

当我们局部安装了webpack webpack-cli后，发现运行webpack报错命名找不到

解决： 全局安装webpack webpack-cli

默认生成环境打包

webpack --mode development/production 开发环境/生产环境打包

过程：

前提是webpack已经成功安装，建一个src文件夹——src下建一个js文件——终端命令行使用webpack——产生dist文件夹【文件夹中的main.js是存放了压缩的文件，是经过压缩的。如果终端运行的是webpack --mode development 即开发环境打包，那么代码是不经过压缩、且注释不会被删除的】——有了js文件了，那么接下来肯定需要一个html文件把js文件引入一下——查看结果肯定是没问题的。

2.配置文件使用

默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的运行 webpack 命令就会自动的去寻找这个文件webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

我们接下来对这个文件进行配置，主要从以下几个方面来着手

1. 基础功能 ：入口 出口 文件配置2. 转换器： loader 3. 插件: plugin单页面配置 vs 多页面配置 单页面配置指的只有一个入口一个出口的项目 【 推荐 】多页面配置指的是有多个入口多个出口的项目

1.单页面配置

1.1 基础功能

/* webpack配置文件也是Node.js文件这个文件也是一个独立的 Common.js 模块一个入口一个出口*/const path = require('path')// 1. 创建模块const webpackConfig = {entry: './src/index.js', //相对路径【网络路径】output: {//出口目录、文件的配置path: path.join( __dirname,'dist'), // 磁盘路径 名称随意改filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称// 简单来说【给出口文件一个名称和存放路径】},mode: 'development'//确定是生产环境还是开发环境的打包，【生产环境不被压缩，且注释不被解析】}// 2. 导出模块module.exports = webpackConfig

1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以

​ 举例： 我们有两个模块，A模块引用B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而打包B模块

在src文件夹下建一个module文件夹——里面建一个name.js文件，因为是模块，所以要导出模块——在index.js中引入模块，使用模块——终端运行webpack——此时查看被自动新建出来的js文件中name.js也被打包了——证明了webpack可以解决模块化依赖问题

//name.jsconst people = {id: 1,name: sunhejie}module.exports = people

//index.jsvar people = require('../src/module/name.js') //引入console.log(people.name)

1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

​ 举例： 实现css的使用

/* ------------------------------- 转换器 ------------------------------ */// 在webpack.config.js中做如下配置：module: {//这里用来存放转换器的配置rules: [// {} //每一个对象就是一个转换器的配置{//css的处理test: /\.css$/, // 整个项目下匹配 .css结尾的文件use: ['style-loader','css-loader'] //两个顺序是不写反的// 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】}]},

1.4 配置前端静态服务器

//需要自动刷新： webServer 搭建前端开发服务器cnpm install webpack-dev-server -g | -D参数:命令行webpack-dev-server --port 8088 --open --mode development写到webpack.config.js配置文件:devServer: {//和module同级port: 8088,open:true}终端运行方式2: webpack-dev-server把运行命令放到package.json文件: devServer可以不要了"scripts":{"dev": "webpack-dev-server --port 8088 --open"}终端: npm run dev

1.5 优雅降级配置

先安装转换器需要的包

$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

配置webpack.config.js

// 在webpack.config.js的module.rules中进行配置{// 配置优雅降级test: /\.js$/,exclude: /node_modules/, // 排除node_models中的js文件use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}]}

1.6 html产出 - 依赖的是插件

安装插件需要的第三方包

$ cnpm i html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')//添加一个配置项plugins:[new HtmlWebpackPlugin({template: './public/index.html',filename: './index.html',//默认到output目录hash:true,//防止缓存,会给文件后面加入hashminify:{removeAttributeQuotes:true//压缩 去掉引号}})]

1.7 css抽离 - 依赖的是插件

将webpack编译过得css文件以 css外部引用的形式引入

安装插件

$ cnpm i extract-text-webpack-plugin -D

const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")//loader配置：use: ExtractTextWebapckPlugin.extract({use: 'css-loader'}) //不再需要style-loader//pulgin配置new ExtractTextWebapckPlugin('css/[name][hash:6].css')

1.8 图片打包

yarn add url-loader file-loader --devnpm I url-loader file-loader --save-dev//url-loader 存base64 file-loader存文件（woff mp3）{test:/\.(png|jpg|gif)/,use:[{loader: 'url-loader',options: {limit: 5000,//字节少于5000 ——》 base64 超过5000 fileoutputPath: 'images/', 5000意思存到images}}]}//css中引入 | js动态(模块化) 引入

1.9 静态资源拷贝

npm i copy-webpack-plugin -Dconst CopyWebpackPlugin = require('copy-webpack-plugin')//plugin配置new CopyWebpackPlugin([{from: path.resolve(__dirname,'static'), to: path.resolve(__dirname,'build/static') }])

1.10 配置文件拆分

"dev": "webpack --mode development --config config/webpack.config.dev.js","build": "webpack --mode production --config config/webpack.config.prod.js","server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

1.11 错误资源定制

// 在webpack.config.js中添加如下配置项：devtool: 'source-map' 制定报错信息的源

2.多页面配置

2.1 基础功能

/* webpack配置文件也是Node.js文件这个文件也是一个独立的 Common.js 模块*/const path = require('path')// 1. 创建模块const webpackConfig = {entry: {// 多页面配置，多个入口文件 ，所以放在对象中//index和main是随意写的key名称，但是这里的key会被打包成最后的出口文件的文件名称'index': './src/index.js','main': './src/main.js'}, //网络路径（ 相对路径 ）output: {//出口目录、文件的配置path: path.join( __dirname,'dist'), // 磁盘路径filename: 'js/[name].js' // 入口文件将来打包到出口目录中的文件的路径和名称},mode: 'development'//确定是生产环境还是开发环境的打包}// 2. 导出模块module.exports = webpackConfig

​

​

​