Webpack初识（基础）

Webpack初识

• 为什么需要构建工具

  • 转换es6语法

  • 转换JSX

  • CSS前缀补全/预处理器【sass less】

  • 压缩混淆

  • 图片压缩

  ---

  • 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  • 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

• 前端构建演变之路

  • ant + YUI Tool ==> grunt ==> fis3 及 gulp ==> rollup webpack parcel
    • grunt:任务执行者
    • gulp:是一个基于流的自动化构建工具.除了可以管理和执行任务，还支持监听文件、读写文件
      • 最大特点是引入了流的概念提供了一系列常用的插件去处理流，流可以在插件之间传递
    • Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。

• 为什么选择webpack

  • 社区生态丰富
  • 配置灵活和插件化扩展
  • 官方更新迭代速度快

• webpack:配置文件名称

  • 默认配置文件：webpack.config.js

• webpack`:配置组成

  • module.exports = { 
      entry: './main.js',					 // JavaScript 执行入口文件 打包入口文件
      output: {							     //打包的输出
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: 'bundle.js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
      }，
      mode:'production',					//环境
      module: {								//Loader配置
        rules: [
          {
            // 用正则去匹配要用该 loader 转换的 CSS 文件
            test: /\.css$/,
            use: ['style-loader', 'css-loader?minimize'],
          }
        ]
      }，
       plugins: [							//插件
        new ExtractTextPlugin({
          // 从 .js 文件中提取出来的 .css 文件的名称
          filename: `[name]_[contenthash:8].css`,
        }),
      ]
    };
    

• 环境搭建：安装Node.js和NPM

  • npm install v10.15.3
  • 查看版本：node -v npm -v

• 安装webpack和webpack-cli

  • 创建空目录 和package.json

    • makdir myProject
    • cd myProject
    • npm init -y ==> 生成package.jsons

  • 安装webpack和webpack-cli

    • npm install webpack webpack-cli --save-dev
    • 检查是否会安装成功：./node_modules/bin/webpack -v

  • "scripts": {
        "start": "webpack --config webpack.config.js"  //加上这句话就能实现本地项目命令打包
      },  
     npm run start
     
    

• 通过npm script 运行webpack

• "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"
    },
  npm run build 运行构建
  原理：模块局部安装会在 node_modules/.bin目录创建软链接
  

• 核心概念之Entry

• Entry用来指定webpack的打包入口，依赖图的入口是entry,对于飞代码比如图片、字体依赖也会不断加入到依赖图中

• 单入口：entry一个字符串

- ```
  module.exports = {
      entry:'./path/to/my/entry/file.js'
  }

- **多入口：`entry`是一个对象**

• module.exports = {
      entry:{
          app:'./src/app.js',
          adminApp:'./src/adminApp.js'
      }
  }
  

  



- #### 核心概念之`Output`

  - `Output`用来告诉`webpack`如何将编译后的文件输出到磁盘

  - ```
    output:{
           filename:'[name].js' 	//==> 通过占位符确保文件名称的唯一 	
           path:path.join(__dirname,'./dist'),
       },
     
    ```

  - ```
    /*******************************************************/
    单个入口文件的话，可以写死，多个入口文件是需要  [name].js  来进行占位
    不然会报下面的错误
    ERROR in chunk search [entry]
    bundle.js
    Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 0 and 1)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! [email protected] build: `webpack`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    ```

- #### 核心概念之`Loaders`

- `webpack`开箱即用只支持`js` 和`json`俩种问价类型，通过`Loaders`去支持其他文件类型并且把它们转化成有效的模快，并且可以添加到依赖图中

- `Loaders`本身是一个函数，接受源文件作为参数，返回转换的结果

- 常见的`Loaders`

  | 名称                                                         | 描述                                                         |
  | ------------------------------------------------------------ | ------------------------------------------------------------ |
  | [`raw-loader`](https://www.webpackjs.com/loaders/raw-loader) | 加载文件原始内容（utf-8），将文件以字符串的形式导入          |
  | [`file-loader`](https://www.webpackjs.com/loaders/file-loader) | 将文件发送到输出文件夹，并返回（相对）URL，进行图片、文件等的打包 |
  | [`babel-loader`](https://www.webpackjs.com/loaders/babel-loader) | z转换ES6、ES7等新语法，然后使用 [Babel](https://babeljs.io/) 转译为 ES5 |
  | [`ts-loader`](https://github.com/TypeStrong/ts-loader) 或 [`awesome-typescript-loader`](https://github.com/s-panferov/awesome-typescript-loader) | 像 JavaScript 一样加载 [TypeScript](https://www.typescriptlang.org/) 2.0+ |
  | [`less-loader`](https://www.webpackjs.com/loaders/less-loader) | 加载和转译 LESS 文件                                         |
  | thread-loader                                                | 多进程打包JS和CSS                                            |
  | [`postcss-loader`](https://www.webpackjs.com/loaders/postcss-loader) | 使用 [PostCSS](http://postcss.org/) 加载和转译 CSS/SSS 文件  |

- ```
  module:{
      rules:[
          {test:/\.txt$/,use:'raw-loader'}
      ]
  }
  test 指定匹配规则，use 指定使用的 loader 的名称 

• 核心概念之Plugins

  • 插件用于bundle文件的优化，资源管理和环境变量注入

  • 作用域整个构建过程

  • 常见的plugins

    CommonsChunkPlugin	提取 chunks 之间共享的通用模块提取成公共JS
    CleanWebpackPlugin	q清理构建目录
    ExtractTextWebpackPlugin	从 bundle 中提取文本（CSS）到单独的文件
    CopyWebpackPlugin	将单个文件或整个目录复制到构建目录
    HtmlWebpackPlugin	简单创建 HTML 文件，用于服务器访问
    UglifyjsWebpackPlugin	可以控制项目中 UglifyJS 的版本,压缩JS
    ZipWebpackPlugin	j将打包除的资源生成一个zip包
    HotModuleReplacementPlugin	启用模块热替换(Enable Hot Module Replacement - HMR)

• 核心概念之Mode

  • Mode用来指定当前的构建环境是production、development还是none

  • 设置Mode可以使用webpack内置的函数，默认值为production

  • development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
    production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

    • none 不开启任何优化选项
    • 记住，只设置 NODE_ENV，则不会自动设置 mode。**