4.webpack

webpack概述：

​ 是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等功能，提高了开发效率和项目可维护性

webpack的基本使用：

1. 创建列表隔行变色项目

   1. 新建项目空白目录，并运行npm init -y 命令，初始化包管理配置文件pack.json
   2. 新建src源代码目录
   3. 新建src-> index.html首页
   4. 初始化首页基本的结构
   5. 运行npm install jquery -s 命令，安装jquery
   6. 通过模块化的形式，实现列表隔行变色效果

2. 在项目中安装和配置webpack

   1. 运行npm install webpack webpack-cli -D 命令，安装webpack相关的包

   2. 在项目根目录中，创建名为webpack.config.js的webpack配置文件

   3. 在webpack的配置文件中，初始化如下基本配置：

      1. module.exports = {
         	mode: 'development' //mode 用来指定构建模式 （还有production)
         }
         

   4. 在package.json配置文件中的scripts节点下，新增dev脚本如下：

      1. "scripts": {
         	"dev" : "webpack" //script节点下的脚本，可以通过npm run 执行
         }
         

   5. 在终端中运行 npm run dev 命令，启动webpack进行项目打包

3. 配置打包的入口与出口

   1. webpack的4.x版本中默认约定：

      1. 打包的入口文件为src -> index.js
      2. 打包的输出文件为dist -> main.js

   2. 如果要修改打包的入口与出口，可以在webpack.config.js 中新增如下配置信息：

      1. const path = require('path') //导入node.js中专门操作路径的模块
         module.exports = {
         	entry: path.join(_dirname,'./src/index.js'), //打包入口文件的路径
         	output: {
         		path: path.join(_dirname,'./dist'), //输出文件的存放路径
         		firname: 'bundle.js'//输出文件的名称
         	}
         }
         

4. 配置webpack的自动打包功能

   1. 运行npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

   2. 修改package.json -> scripts中的dev命令如下：

      1. "scripts": {
         	"dev": "webpack-dev-server" // script节点下的脚本，可以通过num run 执行
         }
         

   3. 将src ->index.html中，script脚本的引用路径，修改为“/buldle.js"

   4. 运行npm run dev 命令，重新进行打包

   5. 在浏览器中访问http://localhost:8080地址，查看自动打包效果

5. 通过loader打包非js模块

   1. 在实际开发中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可正常打包，否则报错

   2. less-loader 可以打包.less相关的文件

   3. sass-loader可以打包处理.scss相关的文件

   4. url-loader可以打包处理css中与url路径相关的文件

   5. 打包处理css文件

      1. 运行npm i style-loader css-loader -D命令，安装处理css文件的loader

      2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

         1. //所有第三方文件模块匹配规则
            module:{
            	rules: [
            		{test: /\.css$/, use: ['style-loader','css-loader']}
            	]
            }
            //其中test表示匹配的文件类型，use表示对应要调用的loader
            //use数组中指定的loader顺序是固定的，多个loader的调用顺序是：从后往前调
            

   6. 打包处理less文件

      1. 运行npm i less-loader less -D命令

      2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

         1. //所有第三方文件模块匹配规则
            module:{
            	rules: [
            		{test: /\.less$/, use: ['style-loader','css-loader','less-loader']}
            	]
            }
            

   7. 打包处理scss文件

      1. 运行npm i sass -loader node-sass -D命令

      2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

         1. //所有第三方文件模块匹配规则
            module:{
            	rules: [
            		{test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}
            	]
            }
            

6. 配置postCSS自动添加css的兼顾前缀

   1. 运行 npm i postcss-loader autoprefixer -D命令

   2. 在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置：

      1. const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
         module.exports = {
         	plugins:[autoprefixer] //挂载插件
         }
         

   3. 在wbpack.config.js的module->rules数组中，修改css的loader规则如下：

      1. module:{
         	rules:[
         		{test: /\.css$/, use: ['style-loader','css-loader','postcss-loader']}
         	]
         }
         

7. 打包样式表中的图片和字体文件

   1. 运行npm i url-loader file-loader -D命令

   2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

      1. module:{
         	rules: [
         		{
         			test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
         			use: 'url-loader?limit=16940'
         		}
         	]
         }
         //其中？之后的是loader的参数项
         limit用来指定图片的大小，单位是字节（byte),只有小于limit大小的图片，才会被转为base64图片
         

8. 打包处理js文件中高级的语法

   1. 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D

   2. 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

   3. 在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：

      1. module.exports = [
         	presets: ['@babel/preset-env'],
         	plugins: ['@babel/plugin-transform-runtime',@babel/plugin-proposal-class-properties]
         ]
         

   4. 在webpack.config.js的module->rules数组中，添加loader规则如下：

      1. //exclude为排除项，表示babel-loader不需要处理node_modules中的js文件
         {test: /\.js$/,use:'babel-loader',exclude:/node_modules/}
         

webpack中配置vue组件中的加载器

1. 运行npm i vue-loader vue-template-compiler -D命令

2. 在运行webpack.confg.js配置文件中，添加vue-loader的配置项如下

3. module:{
   	rules: [
   		{
   			test: /\.vue$/,loader:'vue-loader',
   		}
   	]
   }
   

   webpack打包发布

   通过package.json文件配置打包命令
   该命令默认加载项目根目录中的webpack.config.js配置文件
   "scripts": {
   	"build": "webpack -p",
   	//用于开发调试的命令
   	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000"
   }
   
   npm run build 打包命令