webpack

Posted 2020-12-13 do-something

暴露js文件两种方式，export{ 和和export default{,

两者区别是

export可以在一个js文件中写多个，export default在一个js文件中只能写一个

导入方式  export=> import {a  } from " "     export default =>import a from ""

 

webpack打包所有项目中的所有静态资源文件jscss等

1.使用webpack使得浏览器支持import export

安装webpack和webpackcli=>

　　　　　调用webpack 执行npx webpack命令（如果文件中没有webpackconfigjs，这个命令就通过依赖webpack文件进行打包，放屁这执行文件中的webpackconfigjs）=>

　　　　　　　　　　生成dist目录和main.js文件=>

webpack对ES6中的import和export语句进行降级使得旧版本浏览器可以执行的ES5的代码

2.webpack处理图片，webpack默认只能处理js文件

须要安装npm insrall --save-div file-loader来进行处理

3.对webpack进行配置webpack.config.js

webpack有四个核心属性：1）entry项目入口文件

　　　　　　　　　　　　2）output项目输出文件{filename:"".打包之后的文件名称path:打包生成的那个目录

　　　　　　　　　　　　3）module，这里定制rules处理非js文件

　　　　　　　　　　　　　　　　　　webpack默认只能处理js文件，

　　　　　　　　　　　　　　　　　　其他如图片，视频，css，字体文件等非js文件不能处理，

　　　　　　　　　　　　　　　　　　配置方法就是当遇到png/jpg/svg等结尾的文件时，就use安装过的file-loader来进行处理

　　　　　　　　　　　　　　　　　　处理css文件=>安装cssloader并配置规则来出处理css文件，并把处理后的css文件生成一个字符串，把该字符串存放到dist目录下的js文件中，用styleloader把字符串生成到页面当中

　　　　　　　　　　　　　　　　　　处理.vue结尾文件，有vueloader

　　　　　　　　　　　　　　4 ) plugin,插件，帮助webpack实现其他的功能，如生成文件，清理文件夹等

　　　　　　　　　　　　　　　　　　设定htmlWebpackPlugin，可以生成一个html页面模板，生成一个页面，并把dist生成的多个js文件进行自动引入

　　　　　　　　　　　　　　　　　　清理dist文件夹，清理不用的js文件

4.entry引入多个js文件