失业学习-前端工程化-webpack基础

两个有用的微前端框架

乾坤 无界

实际的前端开发

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

webpack实际应用

指令

- npm init -y                                           初始化包管理文件package.json
- npm install packageName -S                            -S明确告诉npm所加载的包进入到dependencies目录下，该目录下的配置是开发环境和线上环境都能用到的
- npm install webpack@版本号 wbpack-cli@版本号 -D         安装webpack，-D明确告诉npm所加载的包进入devDependencies目录下，该目录下放置只在开发环境能用到的资源

- 注意：
    -S：是--save的简写
    -D：是--save-dev的简写

基本使用

1. 在项目的根目录下创建一个webpack.config.js的webpack配置文件，并初始化如下的基础配置：

    module.exports = {
        mode: 'development'
    }

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

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

3. 在终端中运行npm run dev命令，启动webpack进行项目的打包构建

4. webpack的基本使用

   4.1：mode的可选值

   mode节点的可选值有两个，分别是

   1. development

   • 开发环境
   • 不会对打包生成的文件进行代码压缩和性能优化
   • 打包速度快，适合在开发阶段使用

   2. production

   • 生产环境
   • 会对打包生成的文件进行代码压缩和性能优化
   • 打包速度很慢，仅适合在项目发布阶段使用

   4.2 webpack.config.js 文件的作用

   • webpack.config.js是webpack的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件从而基于给定的配置，对项目进行打包。
   • 注意:由于 webpack 是基于 node.is 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

   4.3 webpack的默认约定

   在webpack4.X和webpack5.X的版本中，有如下的默认约定：

   1. 默认的打包入口文件为src -> index.js
   2. 默认的输出文件路径为dist -> main.js
   3. 注意：可以在webpack.config.js中修改打包的默认约定

   4.4自定义打包的入口与出口

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

   const path = require('path')
   module.exports = {
       entry: path.join(__dirname, "../src/index.js"),     // 打包入口的文件路径
       output: {
           path: path.join(__dirname, "./dist"),       // 输出文件的存放路径
           filename: 'bundle.js'       // 输出文件的名称
       }
   }
   

webpack中的插件

1. 插件的作用

   • 通过安装第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有以下两个：

   1. webpack-dev-server

   • 类似于node.js阶段用到的nodemon工具
   • 每当修改了源代码，webpack会自动进行项目打包和构建

   2. html-webpack-plugin

   • webpack中的Html插件（类似于一个模板引擎插件）
   • 可以通过此插件自定制index.html页面的内容

2. webpack-dev-server

   2.1 安装webpack-dev-server
   运行如下的命令，即可在项目中安装这个插件：npm install webpack-dev-server@版本号 -D
   2.2 配置webpack-dev-server

   1. 修改package.json->scripts中的dev命令如下：

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

   2. 再次运行npm run dev命令
   3. 在浏览器中访问http://localhost:8080/地址，查看自动打包效果
      注意：webpack-dev-server会启动一个实时打包的http服务器

   注意： 我配置完这些之后，访问http://localhost:8080/报错了，not get 404，我按照下面的步骤解决了一下：

   1. 我先是输入http://localhost:8080/webpack-dev-server看看能不能看到webpack仪表盘
   2. 再看http://localhost:8080/bundle.js看看能不能看到打包成功的文件(为了确保万无一失，全局搜索一下自己写的代码)
   3. 发现上面都没问题之后，查阅文档说要配置静态文件目录

   devServer: {
       static: {
           directory: path.join(__dirname, 'src'), // 如果 HTML 在 src/ 目录
       },
   },
   

   4. 但是我配置完之后，发现我的js代码并没有生效，查阅资料说index.html什么默认不会注入打包的bundle.js，这个看上去不知道咋理解，以为我已经使用

webpack中的loader

在实际开发过程中，webpack默认只能打包处理.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。

1. loader加载器的作用：协助webpack打包处理特定的模块，比如：

- css-loader 可以打包处理.css相关的文件
- less-loader 可以打包处理.less相关的文件
- babel-loader 可以打包处理webpack无法处理的高级js语法

2. loader的调用过程

flowchart LR
    将要被webpack打包\n处理的文件模块 --> B{是否为js模块}
    B -- 是 --> C{是否包含\n高级js语法}
    B -- 否 --> D{是否配置了\n对应loader}
    C --> E{是否配置了\nbabel}
    C --> webpack进行处理
    D -- 是 --> 调用loader处理
    D -- 否 --> 报错
    E-- 是 --> 调用loader处理
    E -- 否 --> 报错

3. 打包处理css文件

1. 运行如下的命令，即可在项目中安装处理css文件的loader：npm install style-loader@版本号 css-loader@版本还 -D
2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: {
        rules: [
          {
            test: /\.css$/, // 匹配所有 .css 文件
            use: ['style-loader', 'css-loader'], // 使用这两个 Loader 处理
          }
        ],
      },

注意：

• use数组中指定的loader顺序是固定的
• 多个loader调用的顺序是：从后往前调用

css文件的处理过程

1. webpack 默认只能打包处理 .js 结尾的文件，处理不了其它后缀的文件
2. 由于代码中包含了 index.css 这个文件，因此 webpack 默认处理不了
3. 当 webpack 发现某个文件处理不了的时候，会查找 webpack.config.js 这个配置文件看 module.rules 数组中，是否配置了对应的 loader 加载器。
4. webpack 把 index.css 这个文件，先转交给最后一个loader 进行处理(先转交给 css-loader)
5. 当 css-loader 处理完毕之后，会把处理的结果，转交给下一个loader(转交给 style-loader)
6. 当 style-loader 处理完毕之后，发现没有下一个loader 了，于是就把处理的结果，转交给了 webpack
7. webpack 把 style-loader 处理的结果，合井到 /dist/bundle,js中，最终生成打包好的文件。

4. 打包处理less文件

1. 运行如下的命令，即可在项目中安装处理css文件的loader：npm install less-loader@版本号 less@版本还 -D
2. 在webpack.config.js的module->rules数组中，添加loader规则如下：

    module: {
        rules: [
          {
            test: /\.less$/, // 匹配所有 .less 文件
            use: ['style-loader', 'css-loader', 'less-loader'], // 使用这两个 Loader 处理
          }
        ],
      },

错误类型与解决

Uncaught SyntaxError: Cannot use import statement outside a module

SyntaxError：语法错误

Module parse failed： Unexpected token

You may need an appropriate loader to handle this file type 你需要一个合适的loader来处理这个文件类型