打包
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
这样我们每次更改过代码就不需要去输入指令编译再去看效果了
