前端工程化

实际

• 模块化：js、css资源模块化
• 组件化：可复用UI结构、样式、行为
• 规范化：目录结构划分、编码规范、接口规范、文档规范、git分支管理
• 自动化：自动构建、自动部署、自动测试

解决方案：

webpack：主用

parce：项目开发基本不用，开发项目包用

webpack

主要功能：

代码压缩混淆、处理浏览器js兼容、性能优化

例如隔行变色：直接页面直接引入js存在兼容性问题，但引入用webpack打包好的dist中main.就可以用（将原先js中代码导入打包js中解析，解决兼容）直接用了jQuery语法但是没有jquer包，webpack中含有jQuery包

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-D 告诉NPM 装到dev节点下

@安装指定版本

webpack.config.js -run dev 的时候读取此文件

// 使用node导出语法  向外导出一个webpack的配置对象
module.exports={
    //代表webpack 运行模式， development 开发阶段 和 production  上线阶段
    mode:'development'
}

入口/出口打包

webpack.config.js 页面配置

const path =require('path')
// 使用node导出语法  向外导出一个webpack的配置对象
module.exports={
    //代表webpack 运行模式， development 开发阶段 和 production  上线阶段
    mode:'production',
    // entry:path.join(__dirname,'./src/index.js'),//打包入口文件地址
    entry:'./src/index.js',//官方新简约写法
    output:{
        //存放目录
        path: path.resolve(__dirname, 'dist'),
        //生成文件名
        filename: 'bundle.js'
    }
}

安装插件：server 热更新

Ctrl+s自动同步打包js文件

安装

npm install --save-dev webpack webpack-dev-server

卸载

npm uninstall --save-dev webpack-dev-server

Cli安装

npm i webpack-cli

HTML页面引入js变为

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

访问的内存中js，这里的才是同步更新的 ,并不是dist中的bundle.js

安装html-webpack-plugin

实现访问本地80端口时，不用再手动点击src进入index，启动访问可直接进入

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

npm install html-webpack-plugin@5.3.2 -D

配置webpack.config.js

//导入html-webpack-plugin 插件
const HtmlWebpackPlugin  =  require('html-webpack-plugin')
//new 构造函数 创建插件是咧对象
const webpug  =  new HtmlWebpackPlugin ({
   template:'./src/index.html', //指定复制页面
   filename:'./index.html'
})

module.exports={}中添加插件数组，启用是调用

module.exports={
    //代表webpack 运行模式， development 开发阶段 和 production  上线阶段
    mode:'production',
    // entry:path.join(__dirname,'./src/index.js'),//打包入口文件地址
    entry:'./src/index.js',//官方新简约写法
    output:{
        //存放目录
        path: path.resolve(__dirname, 'dist'),
        //生成文件名
        filename: 'bundle.js'
    },
    //插件的数组 将来webpack运行时 加载并调用
    plugins: [webpug],
}

配置devServer启动自动打开浏览器

module.exports={
    //代表webpack 运行模式， development 开发阶段 和 production  上线阶段
    mode:'production',
    devServer: {
        static:'./',//根目录，需要点击进入src才能查看
        //static:path.join(__dirname, 'src'),//可以直接访问到src页面，实现页面的实时查看。
        host: "localhost",//指定运行IP地址
        port: 8080,
        hot: true,
        open:true,//启动自动打开浏览器
    },
}

安装loader

创建css文件夹创建index.css文件，在index.js中引入index.css使用loader处理

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：
npm install --save-dev css-loader
npm install --save-dev ts-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

less-loader

npm i less-loader@10.0.1 less@4.1.1

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

url-loader

cnpm i url-loader@4.1.1 file-loader@6.2.0 -D

module:{
        rules:[
            //处理图片文件的loader  如果需要调用的loader只有一个 则只传递一个字符串也可以 多个必须指定数组
            {test:/\.jpg|png|gif$/,use:'url-loader'},
        ]
    }

index.js

//导入图片 logo
import logo from './images/logo1.png'
console.log(logo)
//给img 标签src赋值
$('.box').attr('src',logo)

limit

大于limit值不会被转为bast64，小于即可转为

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

babel-loader

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

创建babel.config.js文件 和webpack.config.js平级

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

webpack.config.js

 module:{
        rules:[
            //babel-loader处理高级语法 排除第三方包如：node_modules
            {test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: 'babel-loader'}
        ]
    }

打包发布build

package.json

"scripts": {
    "dev": "webpack serve"
    "build":"webpack --mode production"	
    //production打包上线模式 优先级高于webpack.config.js中的mode:'development',
  },

npm run build 运行打包 出现dist文件，压缩dist文件发给后端