Webpack 使用（一）

Webpack基本使用

 在命令行工具git bash中可以输入webpack -h可以得到webpack的一些配置选项

例如

• - -watch 监听
• - -module-bind 绑定loader
• - -progress 打印进程的百分比
• - -color 打包信息带有颜色显示
• - -display-modules 显示打包的模块
• - -display-reason 显示打包的原因

---

首先在目录下新建以下文件：

• index.html 引入hello.bundle.js(hello.bundle.js为打包后的文件)
• hello.js 主js文件，内部require引入css文件
  require(‘style-loader!css-loader!./style.css’);
• style.css 任意设置一些样式用于区分是否成功

PS

• css-loader 是处理css文件中的url()等
• style-loader 将css插入到页面的style标签
• less-loader 是将less文件编译成css
• sass-loader 是将sass文件编译成css
  loader的加载顺序是从右往左，从下往上
  使用这种require方法只是使用loader的方法之一，我们还可以通过CLI和webpack配置文件进行使用，之后会用到
  http://webpack.github.io/docs/using-loaders.html

---

打包

完成上面的准备步奏，我们就可以来真正进行打包了，在命令行中输入webpack hello.js hello.bundle.js (--progress --colors --display-module)

PS

hello.bundle.js为打包后的js文件，这样html文件只需要引入一个hello.bundle.js 文件即可，不需要再去分别引入每个js文件和每个css文件

---