Webpack入门教程

使用webpack进进行开发,本篇默认读者已经在本机安装了node.js,npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js。

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

webpack.png
  1. 用 npm 安装 Webpack$ npm install webpack -g,此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h。
  2. 编译需要编译的JS文件demo.js并打包到webpack_demo.js$ webpack demo.js webpack_demo.js
  3. 使用Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
  • npm install css-loader style-loader安装 loader
  • $ webpack demo.js webpack_demo.js --module-bind 'css=style-loader!css-loader' 重新打包,done。
  • 当然对于其配置可以写在其config文件中webpack.config.js
  1. $ webpack --progress --colors使用webpack打包时显示颜色
  2. $ npm install webpack-dev-server -g安装webpack开发服务器进行开发环境搭建,$ webpack-dev-server --progress --colors运行服务器。
运行dev_server.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • DEMO地址:http://pan.baidu.com/s/1eR4s2uI 1.前言 现今的很多网页其实可以看做...
    童井神阅读 487评论 0 1
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,346评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,821评论 7 110
  • 原创/卢卢 第八十五章 喜旺心里有些儿发酸,却仍笑说:“李清照也有'生当豪杰,死为鬼雄’的锵锵铁骨面啊。我不说自己...
    AB774卢卢阅读 585评论 13 36
  • 么么么,抱抱宝宝,今天的5分钟 早上用力过猛,晚上腰就开始酸了,么么么,看来要更注意身体注意休息才行,宝贝也是啊,...
    握着荆条阅读 107评论 0 0

友情链接更多精彩内容