前端工程化以及WebPack的使用

前端工程化

• 工作内容，将设计稿切图转成静态页面，然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。最后使用后端的模板语言如 smart、velocity 等将静态页面添加页面逻辑，代码交给服务端同学完成上线。整个过程中，JS 框架以 jQuery 为主，CSS 顶多用一下 Less。
• 前端工作方式。前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。涉及到的技术点有 Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS 等。对前端的要求变成了更多工程化为主的问题。
• 一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化

1. 前端工程化的优点：

• 极大的提升开发效率
  • 若没有前端脚手架，搭配环境会浪费许多事件，但如果有前端脚手架，可能只需要2分钟，输入一行命令就可以将项目启动。
• 降低大型项目的开发难度
  • 前端工程化中提倡模块化，组件化。模块化思想将大型项目的功能进行分解，拆分成一个个独立模块。
  • 前端工程化提倡用完善的流程规范和代码规范来保证大型应用的质量和可维护性。比如通过ESlint,对代码进行自动校验。

2. 前端工程化解决方案

早期解决方案：

• grunt
• gulp

目前解决方案

• webpack
• parcel

3. webpack的概念

webpack的本质是一个第三方模块包，用于识别代码，翻译，压缩，整合打包，达到提高打开网站的速度的命令。

• 代码压缩
• 浏览器js的兼容性问题
• 性能的优化

webpack

文档

1. webpack

• 初始化pack-json

npm i -y

• 安装包

npm i webpack webpack-cli -D

deveDependencies:开发 --save-dev -D

dependencies: 开发和生产中 --save -S

• 在项目根目录创建名为webpack.confing.js的webpack配置文件,并初始化如下配置

module.exports = {
    
    
  mode: "development"
}

• 在package.json的sricpts节点下，新增dev的脚本

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

这里写的是"dev",那么运行时就时"npm run dev"。当然也可以改成其他名称。

• 在终端执行npm run dev命令，启动项目webpack进行项目的打包。

项目根目录生成dist文件夹，里面有main.js

打包模式不同，文件以及编译速度都有差异

development:开发模式，注重打包速度

production:上线模式，注重文件大小

2.webpack的配置

• webpack.config.js:

  webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

• 入口：entry (指定要处理哪个文件)

  • 默认值./src/index.js
  • 自定义：entry: './path/to/my/entry/file.js'

• 输出：output (指定生成的文件要存放到哪里)

  • 默认值：./dist/main.js

  • 自定义：

    output: {
            
            
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
      },
    

• plugins：插件的数组，将来webpack在运行时，会加载并调用这些插件

3. loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。webpack默认只能打包处理.js后缀结尾的模块，这是webpack开箱可用的自带能力。其他非.js后缀结尾的模块，webpack默认处理不了，需要loader加载器才可以正常打包，否则会报错。loader加载器的作用：协助webpack打包处理特定的文件模块.

1. css-loader

使用css-loader，允许你在项目中对css文件进行编译.

css-loader只负责将css文件进行加载，使用import加载，并返回Css代码

安装

npm install --save-dev css-loader 

webpack.config.js

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

做完这些后，你会发现css文件没有起效果，这其实时css-loader只是将css代码进行编译，并没有将模块的导出作为样式添加到DOM中，所以就需要style-loader

2. style-loader

将模块的导出作为样式添加到DOM中

安装

npm install --save-dev style-loader

然后把 loader 添加到你的 webpack 配置中。比如：

index.css

div {
    
    
  position: fixed;
  border-radius: 50%;
}

入口文件引入

import "./index.css";

小问题

这里发现,如果使用requier引入css文件时,貌似不会对整个文件做强检查(比如代码中出现的无用变量,冗余变量)如果出现就报错.但用import引入文件就会做对代码做强检查.

webpack.config.js

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

注意：

webpack使用多个loader时是从右向左读的。

4. 加载资源

• 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需额外配置loader。

1. 加载image图片

像 background 和 icon 这样的图像，要如何处理呢？在 webpack 5 中，可以使用内置的 Asset Modules。

webpack.config.js

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };

• 小于8kb文件，文件转base64打包在js中，大于8kb，文件自动命名输出到dist下
• 图片翻译成了base64,放到js文件中：
  • 好处：浏览器不用发请求了，直接可以读取，速度快。
  • 坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失。

注意：

test: /\.(png|svg|jpg|jpeg|gif)$/i,
use:['file-loader']  

如果这样按照上面的配置没有加载图片，那是因为webpack4旧版本，需要两个都引入file-loader,url-loader

2. 加载字体图标

webpack.config.js

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };

5. webpack中的插件

1. [email protected]

• 作用：类似nodemon，修改了源代码，webpack自动进行项目大打包与构建
• 安装插件

 npm i [email protected] -D

• 修改package.json中的dev命令

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

• 运行npm run dev命令，重新进行项目的打包
• 在浏览器中查看localhost:8080查看打包效果
• 可以在webpackconfig中进行配置

  devServer: {
    
    
    open: true,
    host: "127.0.0.1",
    port: 3000
  }

这里配置了主机号，端口号，以及使用默认浏览器进行开启

• 实时打包，存放到内存中，不可见，自动开启服务器

2. html-webpack-plugin

• 作用：类似模板引擎，通过此插件自定义index.html页面内容

• 安装插件：

  npm i html-webpack-plugin -D
  

• 导入插件：

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

• 创建插件实例对象：

  const htmlnewplugin = new HtmlWebpackPlugin({
        
         
      template: './src/index.html',
      filename:'./index.html'
  }
  

• 使用插件：

  plugins: [htmlnewplugin],
  

  使用后，生成的html页面会自动引入对应的js文件，不需要我们再引入，而且在dist文件夹会再生成一个html文件，但我们不可见，因为是在内存中。

3. clean-webpack-plugin

• 默认情况下，此插件将output.path在每次成功重建后删除webpack目录中的所有文件,以及所有未使用的webpack资产。

• 安装

 npm i --save-dev clean-webpack-plugin

• 配置

+  //clean-webpack-plugin
+  const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  mode: "development",  //指明构建模式 development:开发模式  
  //production :上线模式  
  entry: "./src/index.js",  //设置入口模块
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  devServer: {
    open: true,
    host: "127.0.0.1",
    port: 3000
  },
  plugins: [
    htmlplugin,
+    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },
}

4. MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

• 安装

npm install --save-dev mini-css-extract-plugin

• webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    
    
  plugins: [new MiniCssExtractPlugin()],
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

5. CssMinimizerWebpackPlugin

这个插件使用 cssnano 优化和压缩 CSS。

• 安装

$ npm install css-minimizer-webpack-plugin --save-dev

• webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    
    
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

这将仅在生产环境开启 CSS 优化。

如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true:

webpack.config.js

// [...]
module.exports = {
    
    
  optimization: {
    
    
    // [...]
    minimize: true,
  },
};

然后运行webpack

6. babel-loader

bable-loader 允许你使用 Babel 和 webpack 转译 JavaScript 文件。

babel:一个javascript编译器，把高版本js语法降级处理输出适配低版本的语法

babel-loader:可以让webpack转义打包的js代码

安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

使用

在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中，就像下面这样：

module: {
    
    
  rules: [
    {
    
    
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
    
    
        loader: 'babel-loader',
        options: {
    
    
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

项目打包发布

• 打包原因

  • 开发环境下，打包生成的文件存放在内存中，无法获取最终打包生成的文件。
  • 开发环境下，打包生成的文件不会进行代码的压缩和性能的优化

• 配置打包发布：

  • 在package.json中的script节点下，新增build命令

    "scripts": {
        
        
      "dev": "webpack server",
      "build":"webpack --mode production"
    },
  

  –mode指定的参数，会覆盖webpack.config.js中的 mode选项

控制台输入

npm run build

• 整理dist目录下的文件：

  • js文件：

  output: {
      path: path.join(__dirname, "dist"),
  +    filename: "js/bundle.js",
      assetModuleFilename: 'images/[hash][ext][query]'
    },
  

  设置输出目录:js/bundle.js

  • 图片:

    output: {
      path: path.join(__dirname, "dist"),
      filename: "js/bundle.js",
  +    assetModuleFilename: 'images/[hash][ext][query]'
    },
  

  • 单独抽取css:使用MiniCssExtractPlugin