前端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前端开发最基本的用法，更多参数以及功能使用，参考官网