Webpack 4 构建大型项目实践 / 起步

最新推荐文章于 2022-05-23 15:23:30 发布

weixin_34185512

最新推荐文章于 2022-05-23 15:23:30 发布

阅读量327

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://juejin.im/post/5cf493fbe51d455c8838e10d

版权

定义

Webpack 是一个 Javascript 应用程序的静态模块打包器，它会读取 Javascript 文件所需依赖，并把他们打包到一个或多个目标文件。

值得注意的是，Webpack 只能解析 Javascript 文件，处理其他类型文件需要各自的 loader / plugin

安装

准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本，过旧版本可能会缺少 Webpack 需要的包。

yarn global add webpack
复制代码

如果需要在命令行中使用 webpack 命令，webpack 4+ 版本还需要安装 webpack-cli ，如使用时未安装它会提醒你安装。

yarn global add webpack-cli
复制代码

全局使用命令前还需要把 webpack.cmd 所在目录（yarn bin）添加到环境变量，使用 yarn global bin 查看该目录具体路径

命令行打包和配置

新建 src.js 文件

function counter() {
if (!counter.count) counter.count = 0
  counter.count++
}

counter()

console.log(counter.count)
复制代码

打包 src.js 并把打包结果写入到同目录下的 dist.js
```
webpack src.js -o dist.js --mode="development"
复制代码
```
-o dist.js 指定生成文件的的路径和文件名，它可以拆分为 --output-path="./" --output-filename="dist.js"

--mode="development" 指定开发环境，打包后的代码不压缩

事实上像这样单文件的打包 Webpack 并不能做什么神奇的事，我们可以在 dist.js 中看到，打包生成代码由两部分组成： __webpack_require__ 函数和 eval 执行 src.js 源码。

由于实际使用时 webpack 配置比较复杂，在命令行中极难阅读且不能满足所有需求，这里就不再继续展开，后文的重点也将放在如何修改配置文件以应对不同需求，更多命令行配置见参考文档“命令行接口”。

使用配置文件

为 webpack 指定配置文件有两种方式：

用 --config 指定配置文件，webpack --config webpack.config.js
使用 Webpack Node.js API ，在 Node.js 代码中调用 webpack 函数

下方的例子我们使用第一种方式，实际项目中第二种方式会更常见，因为可以自定义打包的信息展示（比如等待动画、日志），后文我也会讲到。

新建 webpack.config.js 文件

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src.js',
  output: {
    filename: 'dist.js',
    path: path.resolve(__dirname, './')
  }
}
复制代码

打包 src.js 并把打包结果写入到同目录下的 dist.js
```
webpack --config webpack.config.js
复制代码
```
可以看到，打包结果和上方一样。

Webpack 默认配置文件是当前目录的 webpack.config.js ，所以上面的命令可以简化为 webpack