前端webpack workflow（二）——Webpack基本使用

作者：Jogis
原文链接：https://github.com/yesvods/Blog/issues/3
转载请注明原文链接以及作者信息

前一篇文章介绍了webpack以及安装方法，这次将会介绍webpack在单页面应用程序（Single Page Application）与多页面站点不同场合的用法。

输入与输出

跟其他模块加载器类似，webpack也是需要配置一个入口文件，比如是entry.js
有几种配置方式，下面来介绍一下直接把入口文件写在配置文件 webpack.config.js：

module.exports = {
  entry: {
    "entry":"./entry.js"
  },
  output: {
    path: "build",
    filename: "bundle.js"
  }
}

通过命令行

> webpack

很便利地，webpack检测配置文件，读取模块入口与输出路径和文件名,将文件依赖整合成一个文件，输出到build/bundle.js

通过在HTML简单引入

<script src="./build/bundle.js"></script>

就可以在浏览器运行。

加载器

简单的SPA程序加载，包括：JS编译与加载、CSS编译与加载、图片加载与压缩、JS与CSS压缩。

Webpack提供了一套加载器机制，比如：css-loader、style-loader、url-loader等，用于将不同资源加载到js文件中，例如url-loader用于在js中加载png/jpg格式的图片文件，css/style loader 用于加载css文件，less-loader用于将less文件编译成css。

下面介绍一些常用的加载器（详细介绍在这里）：

style+css+less加载Bootstrap less版本：

require('style!css!less!./bower_components/bootstrap/bootstrap.less');

style+css 加载一般样式文件：

require('style!css!./styles/main.css');

url 加载图片资源文件：

require('url!./images/logo.png');

json loader加载json格式文件:

require('json!./data.json');

js后缀的文件不需要使用加载器

require('./scripts/main.js');

coffee script加载

require('coffee!./scripts/main.coffee');

喜欢尝鲜的童鞋可以通过Babel loader体验ES6/7特性：

require('babel!./scripts/es6.js');

需要注意的是，避免用babel作为加载器加载所有node_module模块，会出现意外结果，而且大量加载情况下，加载时间很长。babel还可以用作reactjs jsx文件加载使用，详细请看。

配置加载器

刚刚介绍了行内加载资源的方式，如果有很多css或者图片资源需要加载，重复写加载器显得很笨拙，webpack提供另一种方式加载资源。
在配置文件添加配置：

module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192"}
    ]
  }
}

其中test是正则表达式，对符合的文件名使用相应的加载器
/.css$/会匹配 xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件
/.css/除了匹配xx.css也可以匹配xx.css.zip

加载器后可以加入?xx=yy传递参数,表示添加将xx设置为yy（跟http地址Query很像）

需要注意的是，使用加载器前需要使用

> npm i --save xxx-loader

安装相应加载器，并通过--save把依赖配置到package.json中，使用加载器并不需要使用require引入。

搜索路径变量

以上介绍的加载器，可以很方便使用webpack整合日常资源，如果认为webpack仅仅只能做这些，那就让您失望了。

可以看到，以上加载资源时候，都使用相对路径来描述路径，对于那些./app/src/scripts/main.js通过修改webpack配置文件，添加默认搜索路径后，显得更加优雅。

// webpack.config.js
var path = require("path")
module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "./app/src/scripts")
    }
  }
}

更改配置文件后加载：

require("js/main.js");

默认搜索路径配置

对于bower_components死忠们，前端开发少不了几个bower插件，使用gulp可以通过gulp-wiredep来动态把bower.json dependencies加载到指定HTML文件。
在webpack也有非常便利的导入方法：
首先，加入配置

module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "src/scripts"),
      src: path.join(__dirname, "src/scripts"),
      styles: path.join(__dirname, "src/styles"),
      img: path.join(__dirname, "src/img")
    },
    root: [
      path.join(__dirname, "bower_components")
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
      )
  ]
}

resolve.root 表示添加默认搜索路径，使用如下语法：

require("jquery");

webpack会在bower_components/jquery目录下进行查找CommandJS模块node_module/index.js、index.js
但是，因为Bower不属于CommandJS规范范畴,使用的是bower.json main属性指定项目入口文件
说到这里，大家就知道plugins里面那串东东是干嘛的啦

之后，我们就可以很方便在任何js文件里面引用jquery：

var jQuery = $ = require("jquery");

需要注意的是，require的并非jquery.js，而是bower_components目录下的文件夹名

多页面开发

webpack 不仅仅适用于SPA开发，对于多页面站点，webpack支持得很好，通过更改配置文件为多入口：

module.exports = {
  entry: {
    "entry":"./src/scripts/entry.js",
    "swiperEffect":"./src/scripts/swiperEffect.js"
  },
  output: {
    path: "build"
    filename: "[name].bundle.js"
  }
}

output设置里面，[name]代表entry的每一个键值，因此运行webpack时候，会输出对应的两个文件：

build/entry.bundle.js
build/swiperEffect.bundle.js

然后就可以在index.html和about.html两个页面分别引用啦

文件分离

前端工程一项就是减少http请求，这表示需要把多个js合并成一个，但是，单个js文件过大会影响浏览器加载文件速度，由于现在浏览器并发http请求多达6个，可以利用这个特性，将可复用第三方资源库分离加载。

使用CommandJS规范的

//entry.js
require.ensure(["jquery", "imgScroll"], function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({
    XXX
  })
})

通过require.ensure声明的文件，称作按需加载依赖，这些依赖会独立出来一个文件，待入口模块加载完，需要请求时候才会相继加载

再次编译webpack：

build/entry.bundle.js
build/swiperEffect.bundle.js
build/2.2.bundle.js

其中2.2.bundle.js就是jquery+imgScroll异步加载内容
一图胜千言：

可以看到2.2.bundle.js在entry.bundle.js加载完后进行异步加载。

webpack 实用命令

除了简单运行webpack，还可以添加几个参数，方便部署文件处理。

输出js文件，经过uglify进行压缩：

> webpack -p

自动监听变化，动态运行webpack编译：

> webpack --watch

通常Dev阶段，使用--watch配合live-server就可以自动化开发繁琐的窗口切换与回车。

以上仅仅介绍了webpack前端开发最基本的用法，更多参数以及功能使用，参考官网