开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
webpack是什么
webpack就是前端用来打包的 ， 压缩静态资源减少访问压力。在vue中我们大多也是通过webpack来进行压缩管理。
创建项目
- 首先全局安装
webpack相关组件
npm i -g webpack webpack-dev-server
npm i -g webpack-cli
-
然后创建空项目
-
在
package.json同级新增如下文件index.html、main.js、webpack.config.js -
index.html作为主页面渲染 -
main.js作为webpack主入口 -
webpack.config.js则是 webpack 默认的配置文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="./main.js" charset="utf-8"></script>
</body>
</html>
document.write("Hello World");
module.exports={
entry: "./main.js",
devServer: {
static: './'
},
mode: 'development'
}
启动项目
-
npm run dev启动项目发现嗝屁了。 -
提示我们没有dev相关的语法，建议我们执行
npm run -
发现还是没有启动起来，但是打印出一句话，我们全局搜索发现这句话是
package.json中配置的一段执行脚本。搜索之后发现是少了webpack 配置命令。 -
这里为了能够启动项目我们需要改在
scripts下属性 。 新增dev
“dev”: "webpack-dev-server --open"
- 再次执行
npm run dev即可正常启动项目并且浏览器自动打开首页
webpack打包
-
那么
webpack究竟干啥的？ 好像也没感觉他的作用。还记得上面main.js吗。作为前端直接暴露js是很危险的，现在通过webpack进行打包。 -
现在我们将
index.html中引用的Js 修改为bundle.js， 并在webpack.config.js中将输出文件设置为bundle.js，也就是webpack会将脚本语言全部压缩在bundle.js中供给页面使用。 同样是npm run dev我们发现页面正常显示没有任何问题。 -
我们也可以通过相关命令手动将文件压缩起来。
webpack main.js bundle.js
| 命令 | 功能 |
|---|---|
| webpack | 环境构建 |
| webpack -p | 压缩，指定环境 |
| webpack --watch | 监听代码改动并自动打包，热部署？ |
| webpack -d | map映射文件 |
| webpack --colors | 色彩构建 |
多入口
-
正常情况我们不可能只有一个js文件需要压缩，如果webpack该如何操作呢？
-
我们在
webpack.config.js配置多个入口，并且将入口key作为输出名称前缀。
总结
- webpack 能够帮助我们完成最终的统一分割。不用在操作各个项目的定制化配置了
