前端工程化 webpack

webpack

webpack 是前端项目工程化的具体解决方案
主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能

npm init -y
npm install jquery -S

安装webpack

 npm install webpack webpack-cli -D

-S --save
-D --save-dev

通过npmjs.com查看安装时选择-S还是-D

index.js 配置基础语句 以隔行变色为例

// es6导入语法
import $ from 'jquery'


// 定义jquery入口函数
$(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','pink')
})

项目中配置webpack

1.创建webpack.config.js配置文件并初始化

module.exports = {
    // 代表webpack运行模式，可选值 development  production
    mode:'development'
}

2.在package.json的stript节点，新增dev脚本

  "scripts": {
    "dev":"webpack"
  },

3.在终端中运行npm run dev命令，启动webpack项目的打包构建

npm run dev

4.生成dest文件

5.修改index.html下 js引入路径

<!-- <script src="index.js"></script> -->
<script src="../dist/main.js"></script>

webpack可选值应用场景

module.exports = {
    // 代表webpack运行模式，可选值 development  production
    mode:'production'
}

开发时使用development 因为追求的是打包的速度，而不是体积
反过来 发布时使用production 因为上线需要的是体积小

webpack的默认约定

• webpack4.x和5.x的版本中
  • 默认打包入口文件 src --> index.js
  • 默认输出文件 dist --> main.js

导入node文件模块

const path = require("path/posix");

    // entry:指定要处理哪个文件
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        // 存放目录
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename:'bundle.js'
    }

webpack插件

webpack-dev-server
自动打包和构建
html-webpack-plugin
webpack中的HTML插件,可以定制index.html页面内容

npm install webpack-cli -D

2.修改package.json

  "scripts": {
    "dev": "webpack serve"
  },

3.浏览器访问
http://localhost:8080/

webpack在根目录中写入了一个bundle.js文件
但这个文件是保存在内存中的，所以看不见
更改html引用路径

<script src="/bundle.js"></script>

html-webpack-plugin

npm install html-webpack-plugin -D

1、导入HTML插件，得到一个构造函数

const HtmlPlugin = require('html-webpack-plugin')

2、创建HTML插件的实例对象

const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html', // 指定要复制哪个页面
    filename:'./index.html'//指定复制出来的文件名和存放路径
  });

})

3、插件的数组，将来webpack在运行时，会加载并调用这些插件
在module.exports里添加

plugins:[htmlPlugin]

复制后的页面会自动添加上内存里的js

devServer节点

    devServer:{
        open:true,//是否自动打开浏览器
        port:80,//指定端口号
        host:'127.0.0.1',//指定主机地址
    }

const path = require('path');

const HtmlPlugin = require('html-webpack-plugin'); //导入HTML插件

const htmlPlugin = new HtmlPlugin({   //创建实例对象
    template:'./src/index.html', // 指定要复制哪个页面
    filename:'./index.html'//指定复制出来的文件名和存放路径
  });

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        filename:'bundle.js'
    },
    plugins:[htmlPlugin],
    devServer:{
        open:true,//是否自动打开浏览器
        port:80,//指定端口号
        host:'127.0.0.1',//指定主机地址
    }
}

loader概述

webpack处理不了非.js后缀的模块
需要调用loader加载器才可以正常打包

loader加载器的作用给：协助webpack打包处理器特定的文件模块

• css-loader 处理css
• less-loader 处理.less
• babel-loader 处理webpack无法处理的高级JS语法

现在在src文件下创建css文件下index.css
在index.js中导入样式

import './css/index.css'

打包处理css文件

1.安装依赖

npm i style-loader css-loader -D

2.在webpack.config.js 的module->rules数组中，添加loader

    module:{//所有第三方文件模块的匹配机制
        rules:[
            {
                test:/\.css$/,user:['style-loader','css-loader']
            }
        ]
    }

test标识匹配的文件类型
user标识要调用的loader

• user数组中指定的loader顺序是固定的
• 多个loader的调用顺序是从后往前调

打包处理less文件

1、运行安装命令

npm i less-loader less -D

2、在webpack.config.js 的module->rules数组中，添加loader

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

处理url路径相关的文件

npm i url-loader file-loader

index.html

    <!-- 需求把/src/images/bg.jpg设置给src属性 -->
    <img src="" alt="" class="box">

index.js

// 导入图片，得到图片文件
// 导入图片，得到图片文件
import bg from './images/bg.jpg'
$('.box').attr('src',bg)

webpack.config.js

    module:{//所有第三方文件模块的匹配机制
        rules:[
            {
                test:/\.css$/,use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,use:['style-loader','css-loader','less-loader']
            },{
                test:/.jpg|png|gif$/,use:['url-loader?limit-22229']
            }
        ]
    }

limit用来指定图片的大小，单位是字节
只有≤limit大小的图片，才会被转为base64格式的图片

处理js文件的高级语法babel-loader

index.js

// 定义装饰器函数
function info(target){
    target.info = 'Person info'
}

// 定义一个普通的类
@info
class Person{}

console.log(Person.info)

1.安装babel-loader相关包

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-decorators 

2.在webpack.config.js添加规则

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/, // 排除不需要打包的目录
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
      
    }
  }
}

3.在根目录创建babel.config.js

module.exports = {
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
      ]
  }

注：babel插件文档
webpack安装babel-loader文档

打包发布

1.开发环境下，打包生成的文件存放在内存中
2.开发环境下，打包生成的文件不会进行代码压缩和性能化

配置webpack打包发布

在package.json在scripts节点下，新增build命令

"build":"webpack --mode production"

–mode是用来指定webpack的运行模式
production代表生产环境，会对代码进行代码压缩和性能优化

注意：–model指定的参数项会覆盖webpack.config.js中的model选项

优化图片和文件的存放目录

在webpack.config.js中output模块下指定js存放目录

    output:{
        filename:'js/bundle.js'
    }

在webpack.config.js中module模块rules下指图片存放目录

 {
     test:/.jpg|png|gif$/,use:{
         loader:'url-loader',
         options:{
             limit:22228,
             // 明确指定打包生成的图片文件存储到dist目录下的images文件夹
             outputPath:'image'
         }
 }

自动清理dist目录下的旧文件

1.安装clean-webpack-plugin

npm install clean-webpack-plugin -D

2.在webpack.config.js中按需导入插件，得到插件的构造函数之后，创建插件的实例对象

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

3.把创建的cleanPlugin的插件实例对象，挂载到plugins节点上

plugins: [htmlPlugin,new CleanWebpackPlugin()]

4.webpack5.x之后，需要在output中配置path路径

output: {
    filename: 'js/bundle.js',
    path: path.resolve(process.cwd(), 'dist')
}

source Map

Source Map 就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码所对应的位置

出错的时候，除错工具将直接显示原始代码，而不是转换后的代码

在开发调试的时候，建议将值设为eval-source-map

开发环境下，webpack默认启动了Source Map功能，当程序运行出错的时候，可以直接通过控制台提示错误行位置定位到具体的源代码，开发环境下添加以下代码，能保证报错代码与源代码行数保持一致

在webpack.config.js中添加

devtool:'eval-source-map'

在生产环境下，如果省略了devtool选项，则最终生成的未见不包含Source Map 这能防止源码泄露
在生产环境下，如果想定位报错的具体行数，而不暴露源代码，可以将devtool的值设置为nosources-source-map

实际开发中，我们不需要自己配置webpack
会使用CLI 一键生成带有webpack的项目
开箱即用，我们只需知道webpack的基本概念即可

总结

1.能够掌握webpack的基本使用
安装、webpack。config.js 修改打包入口
2.了解常用的plugin的基本使用
webpack-dev-server html-webpack-plugin
3.了解常用的loader的基本使用
loader的作用 loader的调用过程
4.能够说出Source Map的作用
精准定位到错误行并显示对应的源码
方便开发者调试源码中的错误

补充 webpack 路径别名

webpack.config.js添加与module同级模块resolve

    resolve: {   //路径起别名
        alias: {
          '@': path.resolve(__dirname, './src/'),
        },
      },

使用@表示 src目录