webpack是什么
Posted 前端程序员手册
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack是什么相关的知识,希望对你有一定的参考价值。
有了webpack你可以这样这样写你的代码
app.js(主文件)
//通过import引入被依赖文件
import bar from './hello';
//调用引入的方法
hello()
hello.js (被依赖的文件)
//通过export default方式导出
export default function hello(){
alert('hello world')
}
webpack.config.js (webpack配置文件)
module.exports = {
//配置入口文件,跟main函数有点像
entry:'./app.js',
output:{
//我们将要打包输入的文件
filename:'bundle.js'
}
}
这票是webpack的配置代码,意思就是说我们代码的入口是./app.js, 我们输出的代码目标文件是bundle.js。
page.html
<html>
<head>
....
</head>
<body>
...
<script src="bundle.js"></script>
</body>
</html>
我们在页面中只要简单地把这个 bundle.js引入便可
小结:webpack就是一个代码打包工具,有了它我们可以通过import、 export 等关键词进行模块代码划分与引入,并最终通过webpack把各部分代码打包成一个应用。
更多请访问webpack官网
https://webpack.js.org/
以上是关于webpack是什么的主要内容,如果未能解决你的问题,请参考以下文章
Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段