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 的解决方法(代码片段

如何使用webpack加载库源映射?

什么是“/ *!在生成的webpack 4代码中找不到静态导出* /“是什么意思?

初识Webpack

C# 最有用的(自定义)代码片段是啥? [关闭]

webpack loader