webpack初体验

打包

webpack1.gif

添加模块

webpack支持三种模块添加方式 CMD、AMD、ES6
可以这样引入一个一个js模块require('./hello.js')

Example

webpack2.gif

当引入css文件模块的时候在打包的时候报错
ERROR in ./main.css Module parse failed: E:\webpack\main.css Unexpected token (1:9) You may need an appropriate loader to handle this file type.
大意为:你需要一个适当的loader来处理这种文件类型

打包css文件需要css-loader 和 style-loader这两个loader npm install style-loader css-loader --save-dev
此时引用main.css模块require('style-loader!css-loader!./main.css')
!表示依赖的loader css需要css-loader处理，而style-loader可以帮助将处理后的css样式插入到html文件中

也可以用控制台通过webpack指令来添加loader

webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader'

webpack3.gif

自动编译

webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' --watch
这样我们每次更改过代码就不需要去输入指令编译再去看效果了