Webpack前端工程化

模块化

js,css等的模块化

组件化

复用现有的UI,样式行为

规范化

目录结构的划分，编码规范化，接口规范化，文档规范化，git分支管理

自动化

自动化构建，自动化部署，自动化测试

基本使用

1.新建空白项目使用命令初始化包管理配置文件

npm init -y

2.新建src源代码目录

3.新建src/index.html和index.js

4.初始化页面基本结构

5.安装jq

npm intsall jquery -S

通过es6模块化引入js，并写出代码让html页面的ulli实现隔行渐变，发现不起作用

import $from 'jquery'

下载webpack前端工程化构建工具

npm i webpack@5.5.1 webpack-cli@4.2.0 -D

再根目录创建webpack.config.js文件并初始化：

module.exports={
mode:'development'//指定构建模式是开发模式还是生产模式development/production
}

 再package.json中script中创建指令

// 通过npmrun启动项目
    "dev": "webpack",

在终端运行

npm run dev

发现项目多了一个dist文件夹，看一下里面。webpack通过配置把js文件转换成了没有兼容性的文件，在index.html中导入发现可以正常运行

 <script src="../dist/main.js"></script>

把mode设置为生产模式然后打包

mode:'production'

 对比两次打包的结果发现文件小了时间长了

 webpack.config.js文件在webpack真正打包前会通过读取这个配置文件，基于给定的配置进行打包

可以边看webpack官网边学习 

1.修改输入输出文件路径

//导入路径处理模块
const path =require('path')
module.exports = {
  mode: 'production',
  entry: path.join(__dirname,'./src/index.js'),//文件打包入口文件
  output:{
    path:path.join(__dirname,'./dist'),//打包到什么地方
    filename:'main.js'//文件叫什么名字
  }
}

2.安装webpack-dev-server让webpack监听项目源代码的变化，从而自动打包

npm install webpack-dev-server@3.11.2 -D

1.配置在package.json script中重新配置

"dev": "webpack serve"

2.执行命令后每次保存都会实时打包实时打包的文件放到内存里面了

npm run dev

不再根据output路径输出，存放到实际的物理磁盘上，提高输出性能，默认放到了项目的根目录中隐藏不可见的,但是是可以被访问到的

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

 通过/文件名访问，在终端中的端口中可以访问到html页面

html-webpack-plugin 打包html页面

在webpack中配置

1.安装4.5.1

npm install --save-dev html-webpack-plugin

2.安装完成后在webpack文件中配置

引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

创建插件的实例对象

//导入html打包文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建html打包文件的实例对象
const HtmlPluing = new HtmlWebpackPlugin({
  template: './src/index.html', //源文件存放路径
  filename: 'index.html' //指定打包完成后存放路径
})

挂载实例对象

 plugins: [HtmlPluing]

出现Cannot GET /检查端口localhost是否被占用，试着用127.0.0.1访问试试，还不行就ping一下localhost看看是不是：：1是的话就是端口被占用，重启电脑或修改相关配置文件

修改host文件用记事本打开C:/WINDOWS/system32/drivers/etc/hosts文件，看里面是否有包含：

127.0.0.1 localhost

如果没有则将其添加进去，再查看能否访问localhost。

注意：1.通过dev-server打包的文件默认放到了内存中去看不到但是可以访问到

2.生成的index文件页面底部自动引入js文件，可以在浏览器element选项控制台中看见在尾部由引入js的script标签

devServer节点

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

指定运行的端口号和主机地址等

loader 协助webpack打包特定的模块

webpack只能打包以.js结尾的模块，其他模块则默认处理不了，需要调用loader包才可以正常打包！

css-loader,less-loader处理css,less文件

babel-loader处理更高级的js语法等

1.webpack运行时通过判断是不是js模块

2.是的话继续向下查看是不是更高级的js语法，

2.1不是js模块的话就看看是否配置了loader处理模块没有就报错，

3回到2是高级的js语法的话就要判断有没有配置babel有就处理没有就报错

回到2如果是基础的js语法就让webpack进行处理

打包处理css文件

安装处理css文件的loader,和打包css文件的loader

npm i style-loader css-loader -D

配置处理规则test表示匹配的文件类型，use表示对应要调用的loader

 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']//先引入后打包
      }
    ]
  }

打包处理less文件

安装插件

npm i less-loader less -D

修改配置文件

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

loader加载器

打包处理样式表中路径相关的文件

npm i url-loader file-loader -D

装了url-loader图片不显示了 

 {
        test: /\.jpg|png|gif$/i,
        use: ['url-loader?limit=55555555555']
      }

通过对象形式配置

 {
        test: /\.jpg|png|gif$/i,
        use: {
            loader:'url-loader',
            options:{
            limit:222222222//图片小于这个大小就会转化成base64格式
}
}
      }

Babel-loader

打包处理高级js语法有些js语法带有特殊的类不容易被webpack理解

安装依赖包

npm i babel-loader

下一个babel 的 Node.js API

@babel/core

 下一个转化class中的高级语法

@babel/plugin-proposal-class-properties

配置配置文件

 {
        test:'/\.js$/',
        exclude:'/node_modules',//排除node_modules文件
        use:{
          loader:'babel-loader',
          options:{
          plugins:['@babel/plugin-proposal-class-properties'],
          }
        }
      }

打包发布

1.开发环境下打包生成的文件放在内存中，无法获取到最终的打包文件

2.开发环境下，打包文件不会进行代码压缩和性能优化

配置打包发布

--mode是模式属性，production是值代表以生产模式打包文件

"scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
//--mode是模式属性，production是值代表以生产模式打包文件
  },

配置把image,js放到独立的文件夹

 

每次打包自动清理dist旧文件

安装插件clean-webpack-plugin

npm i clean-webpack-plugin -D

修改配置文件，导入并实例化，在plugins中引用

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

plugins: [HtmlPluing, cleanPlugin],

企业级打包发布

1.生成打包报告，分析优化方案

2.Tree-Shaking

3.为第三方库启用cdn加载

4.配置组件按需加载

5.路由懒加载

6.自定义首页内容

SourceMap

用来处理投入生产环境前压缩打包产生的压缩混淆，压缩混淆后的代码出bug很难解决。

sourcemap是一个信息文件，里面储存着位置信息，也就是说sourcemap中储存着代码混淆的前后对应关系

在配置文件中配置

module.exports = {
  mode: 'development',
  devtool:'eval-source-map',//只能在开发环境使用
  entry: path.join(__dirname, './src/index.js'),
  output: {

生产环境下默认省略debtool不会生成sourcemap，防止代码暴露,可以将值设置为

devtool:'nosources-source-map'

这样就只会显示行数不会定位到代码

即看到行数又暴露代码可以设置(不建议使用)

devtool:'source-map'

总结：1.实际开发中不需要手动配置，脚手架可以直接生成带webpack的项目框架

2.webpack安装，修改webpack.config.js打包配置文件

3.plugin（插件）：webpack-dev-server,html-webpack-plugin

4.loader:css-loader,style-loader,less-loader

5.sourcemap用来定位错误行数方便调试