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中获取到这个全局变量做出判断