前端工程化与webpack简单使用(1)

1.前端工程化

1.1实际的前端开发

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

1.2什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。

1.3前端工程化的解决方案

早期

• grunt
• gulp

目前主流

• webpack
• parcel

2.webpack的基本使用

2.1什么是 webpack

概念：webpack 是前端工程化的具体解决方案

主要功能：提供友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端Javascript 的兼容性，性能优化等强大的功能.

2.2隔行变色案例

• 初始化项目

  npm init -y
  

• 创建src 源代码目录

• 新建 index.html和index.js

• 安装jquery

  • -S的含义与--save相同 将版本放在package.json文件的dependencies中

  • dependencies:开发和上线过程都要用到

  npm i jquery -S 
  

• 通过 es6 语法导入jQuery，实现列表隔行变色效果

2.3安装webpack

npm install [email protected] [email protected] -D

• -D是--save-dev的简写，将版本号记录到package.json文件的devDependencies下

• devDependencies:只在开发阶段会被用到

• --save 或者 --save-dev 可以根据查官方文档来确定

2.4配置webpack

2.4.1基本配置

• 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化配置：

  module.exports = {
      mode: 'development'
  //mode 用来指定构建模式 
  //development 开发阶段  production 发布使用阶段   
  }
  

• 在 package.json 的 script 节点下 新增 dev 脚本:

  script 节点下的脚本 可以通过 npm run xxx 来运行

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

• 在终端运行npm run dev，启动webpack进行项目的打包构建

会在在根目录下生成一个dist目录，目录下有main.js 解决了兼容性问题

2.4.2压缩

• 将 development 改成 production 再重新 npm run dev

• 可将 main.js 压缩

• development 打包时间段 体积大 适合开发阶段

• production 打包时间长 体积小 适合上线阶段

• 在 run 的时候会读取webpack配置文件 ，根据配置文件再去运行

2.4.3webpack中的默认约定

在webpack 4.x和 5.x 的版本中，有如下的默认约定：

• 默认的打包入口文件为 src -> index,js
• 默认的输出文件路径为 dist -> main.js

可以在 webpack.config.js 中修改打包的默认约定

2.4.4自定义打包的入口出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output节点 指定打包的出口：

const path = require('path')

module.exports = {
    mode: 'production',
    // entry 处理的文件路径
    entry: path.join(__dirname , './src/index.js'),
    output: {
        // 导出的文件目录
        path: path.join(__dirname , './dist'),
        //导出的文件名
        filename: 'index.js'
    }
}

3.webpack中的插件

3.1 webpack-dev-server

3.1.1简介

• 官方使用介绍： https://www.npmjs.com/package/webpack-dev-server
• 类似于 node.js 用到的 nodemon 工具
• 每当修改源代码，webpack 会自动进行项目的打包和构建

3.1.2安装

npm install [email protected] -D

3.1.3配置

• 修改 package.json -> script 中的 dev 命令：

  注意后面是serve哦，不是server

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

• 再次运行 npm run dev 命令，重新进行项目的打包

  但是！！！如果你和我一样，发现运行后报下面的错:

  [webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

  那就运行一下下面的命令就 ok ~

  npm install webpack-cli --save-dev
  

  之后再运行 npm run dev 就可以了

• 在浏览器访问 http://locslhost:8080 地址，查看自动打包效果

• 将引用文件路径改为/xxx

• 通过浏览器访问 http://127.0.0.1:8080/src/ 来查看样式的改变

  访问 src 文件夹默认展示其中的 index.html 文件

webpack-dev-server 会启动一个实时打包的 http 服务器，每次修改代码或者保存代码都会被这个插件监听到，插件会将最新的导出文件放在根目录下，储存在内存中，但是看不见，可以在浏览器中通过8080端口的/xxx来访问。

3.2 html-webpack-plugin

3.2.1简介

Plugin that simplifies creation of HTML files to serve your bundles

这个插件简化了HTML文件的创建，以服务于你的bundle

官方使用介绍：https://www.npmjs.com/package/html-webpack-plugin

3.2.2安装

  npm i --save-dev html-webpack-plugin

3.2.3配置

修改 webpack.config.js 文件：

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

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',   //指定原文件的存放路径
    filename: './index.html'        // 指定生成文件的存放路径
})

module.exports = {
    mode: 'development',
    // entry 处理的文件路径
    entry: path.join(__dirname , './src/index.js'),
    output: {
        path: path.join(__dirname , './dist'),
        filename: 'index.js'
    },
    // 插件的数组 将来 webpack 在运行的时候 会调用这些插件
    // 通过 plugins节点 使得 htmlPlugin 插件生效
    plugins: [htmlPlugin]
}

修改了之后我们可以直接访问 http://127.0.0.1:8080 来访问最新页面，因为生成了index.html文件在项目根目录下，储存在了内存里。如果访问不到就保存一下刚刚修改的配置文件。

3.2.4特性

html-webpack-plugin 插件的神奇之处：

• 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到内存中
• HTML 插件在生成的 index.html 页面，自动注入了打包的 index.js 文件

3.3 devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对webpack-dev-server 插件进行更多的配置：

devServer: {
        // 首次打包成功后 自动打开浏览器
        open: true,
        // 在 http 协议后 如果端口号是 80 则可以被省略
        port: 80,
        // 指定运行的主机机制
        host: '127.0.0.1'
    }

注意：凡是修改了 webpack.config.js配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！