内容简介:Webpack 是一个值得注意的是,Webpack 只能解析 Javascript 文件,处理其他类型文件需要各自的 loader / plugin准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本,过旧版本可能会缺少 Webpack 需要的包。
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。