webpack基础总结

1.使用#

webpack版本问题###

目前有两个主版本,一个是在 master 主干的稳定版,一个是在 webpack-2 分支的测试版,测试版拥有一些实验性功能并且和稳定版不兼容,在正式项目中应该使用稳定版。

#查看webpack版本信息
npm info webpack

#安装指定版本webpack
npm install webpack@1.14.0 --save-dev

安装###

npm install webpack -g

查看###

webpack -h

使用项目本地版本的webpack###

# 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
npm install webpack --save-dev

webpack开发工具###

npm install webpack-dev-server --save-dev

2.使用#

①创建一个静态页面index.html和一个js入口文件entry.js:####

<!-- index.html -->
<html>
<head> <meta charset="utf-8"></head>
<body> 
    <script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')

②编译

webpack entry.js bundle.js

③添加模块并修改entry.js

document.write(require('./module.js')) // 添加模块

Loader#

安装使用Loader####

#entry.js
require('./style.css')
#有些环境下可能使用双引号
webpack entry.js bundle.js --module-bind 'css=style!css'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,278评论 7 35
  • 一.什么是 WebpackWebpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照...
    nightZing阅读 1,028评论 1 13
  • Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境...
    stiller阅读 599评论 0 3
  • 如果说神秘是不了描述的东西,我想,梦也如此!有的人在过往的岁月里,也在梦里;有的人在即将的未来里,也在梦里;有的人...
    左羊右羽阅读 326评论 0 0
  • 每一天都是不一样的,改变随时都会发生。今天站桩站的很稳,身体重心一直保持在两腿之间,没有坚持不住了的感觉,不断的将...
    闵静阅读 713评论 0 1