webpack工程化前端开发

Vue基础-00课程介绍_哔哩哔哩_bilibili

源码，https://gitee.com/cao_mingquan/webpack.git

前端开发

实际的前端开发

1、模块化（js代码的复用）

2、组件化（html css的复用）

3、规范化（目录结构有层次，代码编写风格保持一致等等）

4、自动化（例如自动刷新等）

目前主流的前端工程化解决方案

webpack（以这个为主）

parce（第三方包用，用得少）

webpack是前端项目工程化的具体解决方案，可以让开发者专心开发功能，提高开发效率，提高项目可维护性。

webpack作用

1、提供了友好的前端模块化开发支持

2、代码压缩混淆（去除注释，空格，换行，运行更快）

3、处理浏览器端js的兼容性，例如ie8不支持es6语法，可以用webpack向下配置，将es6语法自动转换成低级js语言

第一个webpack示例

 index.js里面写jQuery代码

注意：

1、src目录中放程序员的代码

2、npm i jquery -s 是npm install jquery --save的简写

-s参数会将包名写进dependencies（开发中和上线后，都需要的包，例如jquery）

-d参数（--save-dev）会将包名写进devDependencies（只在开发中用的包，上线后不需要，例如webpack）

3、ES6导入jQuery，import $ from "jquery

import语法在浏览器中有兼容性问题，使用webpack解决，如下

1、在项目中安装webpack相关的两个包

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

2、安装好后，还需要配置

在项目根目录中，创建名为webpack.config.js，初始化如下配置

module.exports = {
    mode:"development"  //mode 用来指定构建模式，可选值有development 和 production
}

development模式在开发阶段用，打包速度快，生成文件体积大

production模式在上线时用，打包速度慢，生成文件体积小

在package.json的scripts节点下，新增dev脚本，如下

  "scripts": {
    "dev": "webpack"//可以通过npm run 执行，例如npm run dev
  },

3、在终端运行npm run dev启动webpack打包构建项目

npm run dev会首先找到webpack.config.js，然后再接着运行webpack

出现一个问题：

在node V18.12.1版本上运行npm run dev报错

Error: error:0308010C:digital envelope routines::unsupported，解决方法如下：

  "scripts": {
    "