就目前pc端项目来讲:
这是模板文件:
这是入口文件:
image.png
entries里面的每一个文件夹是一个入口,包含着一个js和一个css.
在js 中,引入css/scss的方式就是按照当前的目录层级,
image.png
然后在模板中这样引入打包后的js和css
image.png
image.png
好奇过为什么引用的名字和我项目里的文件名不一样?
是按照入口名字来引用的,入口文件夹里的文件名字叫什么都无所谓。这个可以在webpack配置文件中进行配置。
如果一个入口文件夹中有多个js(实际上没这个必要),也会打包成一个js。
js里面的import **css,保证了打包的时候,可以找到相应css进行摘出打包。
刚刚遇到一个疑问,webpack打包之前是如何引用到js和css的呢?
我原来一直不知道run dev的时候会默认执行build。。。只不过run dev的build不会把css单拎出来,会在执行的js当中加载。
实际上,我们设置的webpack的监听,就是能随时监控代码发生变化就进行重新编译。
网友评论