码迷,mamicode.com
首页 > Web开发 > 详细

webpack

时间:2020-07-01 00:14:08      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:conf   配置   --   exp   输出   功能   遇到   mod   webp   

暴露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文件 

 

            

            

 

webpack

标签:conf   配置   --   exp   输出   功能   遇到   mod   webp   

原文地址:https://www.cnblogs.com/do-something/p/13216837.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!