webpack

为什么使用webpack:

     现在都是模块化开发,一些less sass jsx vue等文件并不能被浏览器锁识别 因此要全都打包成标准的静态文件js css来被浏览器所识别  

    也可以做一些性能优化

--save--dev 开发版本 创造

--save  生产环境 市场运行 保存到项目依赖中

查看版本号 webpack -v  (node -v 等等)

将src下的入口文件打包到dist文件下 webpack src/entry.js dist/bundle.js

  dist文件下有个html文件 该html里面加载了bundle文件 项目上线的时候只需要拿着dist目录就可以了

webpack 的出口 paht:path.resolve(__dirname,'dist')必须是一个绝对路径   

console.log(path.resolve(__dirname,'dist'))打印的结果就是文件的决定路径  哪个磁盘下的文件目录

方便打包后正确获取到文件

 

集中将src下的静态文件拷贝到打包目录下

cnpm i --save--dev copy-webpack-plugin

to:他的路径是在output的基础上 因此直接回在dist目录下生成一个public文件

publicPath  

webpack命令进行打包上生产时,它确实是在静态资源路径前面加上publicPath的值

当我们使用webpack-dev-server 进行开发时,它指的是webpack-dev-server 在进行打包时生成的静态文件所在的位置。

也就是说publicPath的使用是分环境的,我们在使用的时候也要区分环境,通常是生产环境和开发环境。

引入的是publicPath中的路径

publicPath的路径是缓存的地址 代码一更新 缓存更新

 

 

cross-env跨平台解决设置node_env环境变量的

在window环境命令行直接设置环境变量是会报错的  unix系统是支持的 未解决兼容

这个包能够支持在命令行设置环境变量

 

webpack -p 等同于 uglifyJsPlugin()

webpack --open 等同于 open-borwser-webpack-plugin

 

在webpack.config.js中定义一个全局的环境变量 通过definePlugin()插件 能够在js中获取到这个全局变量做出判断

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值