04_ webpack5实战应用

1、什么是webpack

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

官网： https://webpack.js.org/    

中文文档：https://webpack.docschina.org/

2、 webpack的原理和概念

• 树结构: 在一个入口文件中引入所有资源，形成所有依赖关系树状图(顺着主入口的js文件就可以找到所有的js文件)
• 模块：模块就是模块可以是ES6模块也可以是commonJS或者AMD模块，对于webpack来说，所有的资源（css,img...）
• chunk：打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk
• bundle：bundle是最后打包后的文件,最终文件可以和chunk长的一模一样,但是大部分情况下他是多个chunk的集合
• 为了优化最后生产出的bundle数量可能不等于chunk的数量，因为有可能多个chunk被组合到了一个Bundle中。

• 为了优化最后生产出的bundle数量可能不等于chunk的数量，因为有可能多个chunk被组合到了一个Bundle中。

 3、webpack安装和体验

1、创建项目目录： webpack-demo

2、进入目录初始化NPM操作：npm init -y        (-y  =  -yes,  i=install)

3、安装webpack及webpack-cli webpack-dev-server

npm install webpack webpack-cli webpack-dev-server -D （这三个文件最好一起装，因为系统会自动把它们三个的关系缕清）（-D是指开发环境，上线之后webpack这个生产车间就用不到，如果装到生产环境，上线的包就太大了）

4、创建src目录或根据需要创建下面的子目录

这时，我们创建若干的js文件，看看打包前和打包后是否都能正常运行输出结果

one.js

 two.js

 index.js

运行index.js结果如下：

此时，我们的整个文件夹情况如下：

 如果我们不打包，直接在命令终端运行node index.js是可以直接出结果的

5、控制台运行命令：npx webpack --mode development   （开发环境）

     控制台运行命令：npx webpack --mode production   （生产环境）

注意：因为 webpack 是局部安装，要进入依赖包执行webpack的命令才有效，直接 webpack -v 会被认为命令无效。使用 npm 包执行器 npx 可以自动找到对应的包执行命令（一般安装了npm会自动安装npx）

打包的时候要先返回demo目录，因为是作为整体打包

 此时，我们可以看到demo目录发生了变化，多了一个dist文件(这就是打包好的文件，上线时只传此文件)

 dist里面的main.js是我们用到的全部js文件的汇总。

 ⭐当我们使用  npx webpack --mode development  进行开发环境下的打包时，main.js是这样的

 可以看到，里面还是有很多注释的。

⭐当我们使用  npx webpack --mode production  进行生产环境下的打包时，main.js是这样的

 只有一行，压缩了文件的大小，去掉了注释和僵尸代码

运行一下main.js结果如下：

 结果与index一致

6、可以使用node运行打包后的资源， 也可以使用HTML引入打包后的资源

 node dist/main.js  或 在html中直接 src引入

在上线环境中，只有打包完后的项目dist

4、webpack的5个核心概念

 5、webpack.config.js 核心配置项

webpack 配置文件webpack.config.js(没有可以自己建立该名文件)
作用： 指示 webpack 干哪些活，当运行 webpack 指令时会加载其中配置
构建工具(webpack.config.js)基于nodejs平台运行的，模块化默认采用commonjs，而项目文件（src内文件）采用的是ES6语法
开发环境： webpack ./src/index.js -o ./build --mode development（更改输出文件名称，默认名为dist）
生产环境： webpack ./src/index.js -o ./build --mode production

 然后在终端运行：

 6、入口文件

 7、 webpack打包html资源

使用插件(plugins)对HTML文件进行处理（html-webpack-plugin）
使用步骤：1. 下载    2. 引入    3.使用
下载安装：npm i html-webpack-plugin -D

淘宝镜像：cnpm i html-webpack-plugin -D
引入插件：const HtmlWebpackPlugin = require('html-webpack-plugin');
使用插件：

 JS代码只需设置成生产模式（production）模式，会自动压缩，也可以手动添加压缩代码。 

html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的资源（JS/CSS）

8、 webpack打包多html开发案例

多html的规律是需要有多个entry，每个html对应一个entry，同时需要新建多个

HtmlWebpackPlugin

// 多个entry

entry: {

       vendor:  ['jquery','./src/js/common.js'],

       index:  "./src/js/index.js",

       cart:  "./src/js/cart.js"

     },

   //负责打包html文件  将js注入到html中，minify压缩html

        new HtmlWebpackPlugin({

             filename: "index.html",

             template: "./src/index.html",

             chunks: ["index","vendor"],

             minify:{

               removeComment:true,

               collapseWhitespace:true

             }

         }),

         new HtmlWebpackPlugin({

             filename: "cart.html",

             template: "./src/cart.html",

             chunks: ["cart","vendor"]

         }),

 9、webpack打包CSS资源

需要使用npm下载安装两个loader帮我们完成打包：
1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里

# npm i css-loader style-loader -D

# webpack

在src下新创建一个css文件 

 在入口文件中引入css

​​​​​

loader配置 

 执行webpack命令

 main.js文件

 可以看到在main.js确实引入了base.css

10、提取CSS为单独文件

css内容是打包在js文件中的， 可以使用”mini-css-extract-plugin”插件提取成单独的CSS文件。
npm i mini-css-extract-plugin -D

1. 在webpack.config.js 中引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2. 在plugins模块中使用插件
plugins: [  new MiniCssExtractPlugin() ],
或通过参数 filename重新命名提职的css文件名
new MiniCssExtractPlugin({ filename:'./css/demo.css' })
3. 在CSS的rules中，使用MiniCssExtractPlugin.loader取代style-loader, 提取js中Css内容为单文件
{ test: /\.css$/,  use: [ MiniCssExtractPlugin.loader, 'css-loader'] }
如果sass和less也提取成单独css文件，也一样将style-loader换成MiniCssExtractPlugin.loader
{ test: /\.scss$/, use: [  MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }
 

    

11、webpack打包less或sass资源

因为css只是单纯的属性描述，它并不具有变量、条件语句等，css的特性导致了它难组织和维护。
Sass和Less都属于CSS预处理器，定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者使用这种语言进行CSS编码工作.
Less需要使用npm下载less包和less-loader
Sass需要使用npm下载node-sass包和sass-loader

 

 12、处理CSS的兼容性

需要使postcss处理， 下载两个包post-loader和postcss-preset-env
npm i postcss-loader postcss-preset-env -D
postcss会找到package.json中的browserslist里面的配置，通过配置加载css的兼容性
修改loader的配置， 新版需要写postcss.config.js,  less和sass兼容性同理

在package.json里进行配置

 13、打包图片资源

需下载url-loader和file-loader两个包， 依赖关系
在css中引入图片

 在HTML中使用图片 需要下载 html-loader来处理图片

 14、开发服务器devServer配置

devServer给我们提供了开发过程中的服务器，是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译。

只会在内存中编译，不会有任何输出,下载webpack-dev-server包
webpack-dev-server并不能读取你的webpack.config.js的配置output
启动devServer指令为: npx webpack serve 本目录执行
webpack5无法刷新，解决：添加配置：target: ‘web’