构建工具-webpack(一)

小肥羊丶
901 阅读4分钟

构建工具作用

  1. 完成前端的模块化，有各种兼容性问题
  2. 样式上对 less sass postCss支持性不好
  3. js新语法使用受限制 es6 es7 ... 构建工具可以使用babel解决这些问题
  4. 代码压缩
  5. 开发规范
  6. 单元测试
  7. 项目工程化

webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中

webpack4.x版本之后需要安装 webpack webpack-cli

局部使用webpack

  1. ./node_modules/.bin/webpack -v //到当前的/node_modules模块里指定webpack

    #!/usr/bin/env node

    什么是 #!/usr/bin/env node

    #!符号用于指明用什么程序解释一下脚本

    /usr/bin/env规定解释程序的路径(环境变量里边env)

    node 解释程序的名称

    /node_modules/.bin目录是一个可执行文件目录，也叫软连接，还叫符号链接，起指向源文件的一种功能。

    /node_modules/.bin目录下的webpack文件是/node_modules/webpack/webpack.js文件的一个拷贝

    在/node_modules/webpack/package.json中一般有一个"bin": "./bin/webpack.js",这个也就是我们能使用webpack的原因

  2. npx webpack npx就是把当前目录定位到/node_modules/.bin目录下

  3. "dev": webpack

    执行 env命令

    执行 npm run env 可以看出原来的环境变量里边多出来项目的绝对路径和npm包的绝对路劲

    npm run这个命令会创建一个脚本，这个脚本就是把当前项目下的node_modules的绝对路径放在了系统的环境变量里边

wapack 是用来打包

wepack-cli 是用来判断环境和webpack配置的

执行打包命令

简单原理

一个自执行函数--启动器函数(webpackBootstrap)

参数部分 第一个参数key是"./src/a.js":是require或者import引用外部文件的路径，value是一个函数打包后的内容；

第二个参数key是"./src"/index.js主文件入口，value是一个函数，是主文件打包后的内容。

启动器函数(webpackBootstrap)里边定义了__weppack_require__函数、module和exports

为什么库或者框架不用webpack打包就是给库或者框架增加了很多冗余代码，导致不纯粹，webpack擅长的是开发环境的定制

  1. 默认配置很弱的，特殊需求需要自己配置，
  2. 并且默认只支持js和json格式的文件

配置介绍

entry: 字符串 | 数组 | 对象

  1. entry: './src/index.js

  2. 数组情况下，这里的并不是多入口，而是把多个文件构建成一个文件，如果要多入口请使用对象模式

    entry: ['./src/index.js', './src/a.js']

    什么是chunk, 一次构建就是一个chunk， 一个入口就是一个chunk

  3. 对象模式

entry: {
    main: './src/index.js',
    a: './src/s.js'
}
<!--对应的输出也要改变， 变成动态输出-->
output: {
    path: path.resolve(__dirname, "./dis"),// 必须是个绝对路径
    filename: "[name].js"//使用一个占位符
}

<!--entry的key作为输出的filename的占位符输出-->

对应有两个chunk文件

看到这里就会发现：

entry字符串和数组适合单页应用(SPA),对象适合多页应(MPA)

mode

选项 描述
development 会将 DefinePlugin 中 process.env.NODE_ENV的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin
production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。
none 退出任何默认优化选项

output

  1. path必须是绝对路径
  2. filename: 构建输出文件名称
  3. 写入到硬盘

module

  1. loader

    一个loader只做一件事,处理webpack不支持的文件格式和模块，从右向左执行, 从下到上,

    css-loader 会提取css到打包输出的js文件中 style-loader 会以js操作DOM的方式在head创建style标签，然后把css-loader提取的css插入到style标签内

    方式

    rules: [
    {
        test: /\.css$/,
        use:['style-loader', {loader: css-loader, options: {}}]
    },
    {
        text: /\.(png|jpg)$/,
        use: {
            // 实际上做了一个拷贝，甚至可以处理Excel表
            loader: "file-loader",
            options: {
                name: [name].[ext],
                outputPath: "images/"//在dist目录下创建一个images文件夹
            }
        }
    },
    {
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        use: {
        loader: "url-loader",
            options: {
                name: "[name]_[hash].[ext]",
                outputPath: "images/",
                // 小于2048的才转换成base64
                limit: 2048
            }
        }
    }
]

// url-loader file-loader加强版本

// url-loader内部使⽤了file-loader,所以可以处理理file-loader所有的事情，但是遇到 jpg格式的模块，会把该格式的图⽚转换成base64格式字符串，并打包到js⾥里。对小体积 的图片比较合适，大图片不合适

//第三方字体 https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("webfont.woff2") format("woff2");
}

body {
  background: blue;
  font-family: "webfont" !important;
  -webpack-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}


script: {
    clean: "riramf ./dist",
    predev: "npm run clean",// 前置钩子
    dev: "webpack"，
    postdev: "cd dist && touch index.html"// 后置钩子
}

// && 是继发执行    &是同时执行
// cross-env  磨平win和linux之间的差异
avatar
文章
阅读
粉丝