webpack基础使用

Posted (⊙o⊙)买噶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack基础使用相关的知识,希望对你有一定的参考价值。

安装webpack:0.在全局安装webpack  npm install webpack -g(如果不在全局装一个webpack,局部的会不识别)    1.通过命令行进入项目安装目录,2.输入npm init   3.npm webpack --save-dev  

 

webpack打包:格式  webpack  需要打包的文件名   打包之后的文件名   例如:webpack  helloWorld.js  helloWorld.bundel.js

                    操作成功之后会给出我们一部分信息:1.Hash:哈希值  2.Version:webpack的版本  3.Time:大这次包所花费的时间   4.Asset:这次打包生成的文件  5. Size这是打包的大小  6. Chunks:这次打包的分块  

                                                                    7.Chunk Names:这次打包的快名称

                    打包的时候用--watch 来监听打包文件的变换,从而文件改变就打包  例如:webpack  helloWorld.js  helloWorld.bundel.js --watch 

loader的引用 : 打包过程中有一些需要我们自己安装一些loader (如css文件,style) npm install css-loader  style-loader --save-dev  ,还需要 require(‘style-loader!css-loader!./style.css‘)=>

                    也可以在打包的时候加上  --module-bind ‘css=style-loader!css-loader‘(推荐)   例如:webpack  helloWorld.js  helloWorld.bundel.js --module-bind ‘css=style-loader!css-loader‘

 

webpack参数:1:watch:监听   2.proggress:打包过程   3.display-modules:查看打包的模块  4.display-reasons:为什么打包这个模块的原因告诉我们





以上是关于webpack基础使用的主要内容,如果未能解决你的问题,请参考以下文章

一:webpack的基础使用

webpack的基础打包

Webpack:基础使用

基础篇——webpack基础用法(三)

webpack---模块打包机webpack基础使用---凡尘

webpack基础使用