Webpack入门--构建web前端工程的利器

本文涉及到的知识点:

• webpack的长处与特色
• webpack基础知识
• package.json

零、What is Webpack?

1. What?

• Webpack可以看做是模块打包机：分析项目结构，找到JavaScript模块以及其他的一些预设，打包为合适的格式以供浏览器使用。
• Webpack的工作方式是：把项目当做一个整体，通过一个主文件（如index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最好打包为一个浏览器可识别的JavaScript文件。

2. Why?

• 模块化： 把复杂的程序细化为小的文件
• 使我们能够实现目前版本JavaScript不能直接使用的特性，并且之后还能能转换为浏览器可以识别的JavaScript文件
• Scss、Less等CSS预处理器

一、Getting Started

1. 安装

mkdir webpack-demo && cd webpack-demo //创建并打开根目录
npm init -y  //初始化package.json文件
npm install --save-dev webpack //安装webpack并加入配置文件列表

2. 利用webpack指令简单打包

将source code(./src)与distribution code(./dist)分离，source code由我们编辑，distrbution code是我们构建过程总的最优化输出，并且distrbution code是被浏览器加载的最终文件。

• 项目结构

webpack-demo
  |- package.json
  |-node_modules
  |- /dist //source code
    |- index.html
  |- /src  //distribution code
    |- index.js

• 打包

  ./node_modules/.bin/webpack src/index.js dist/bundle.js
  

• 输出结果

output_1

3. Using a Configuration

通过使用配置文件代替直接的配置指令

• 项目结构

webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

• webpack.congig.js

const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output: {
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
};

• 输出结果

output_2

二、package.json

1. JSON对象速览

• JSON(JavaScript Object Notation,即JavaScript 对象表示法)是一种用于数据交换的文本格式
• 具有两个显著优点：1. 书写简单，一目了然；2. 符合JavaScript原生语法，可以直接由解析引起处理，不需另加解析代码。
• 每个JSON文档只包含一个值，要么是简单类型的值，要么是复合类型的值

方法

• JSON.stringify(par1,par2,par3)：将一个值转为字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原
• obj.toJSON()：如果有对象有自定义的toJSON方法，则JSON,stringify会使用这个方法的返回值作为参数
• JSON.parse()：用于将JSON字符串转化成对象

2. package.json

package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

• scripts
  scripts指定了运行脚本命令的npm命令行缩写
  eg:

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

• dependences&&devdenpendences
  dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。
  它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

install express --save  //--save参数表示将该模块写入dependencies属性
install express --save-dev  //--save-dev表示将该模块写入devDependencies属性

• bin
  bin项用来指定各个内部命令对应的可执行文件的位置，在node_modules/.bin/目录下建立符号链接。

• config
  config字段用于添加命令行的环境变量。

三、Loaders

webpack把所有的文件当成(.css .html .less .jpg .etc)当做一个module,可是webpack自身只能理解Javascript，因此需要loader作为各个模块资源的转换器，loader本身实质上是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、JSX、LESS或图片。

1.Loader features

• Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript；
• Loader可以同步或异步执行；
• Loader运行在node.js环境中，所以可以做任何可能的事情；
• Loader可以接受参数，以此来传递配置项给loader；
• Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
• Loader可以通过文件 npm 来进行发布和安装；
• 除了通过 package.json 的 main 指定，通常的模块也可以导出一个loader来使用；
  Loader可以访问配置；
• 插件可以让loader拥有更多特性；
• Loader可以分发出附加的任意文件。

2. Resolve loaders

• Loader本身也是运行在node.js环境中的JavaScript模块，它通常会返回一个函数。大多数情况下，我们通过npm来管理loader，但是你也可以在项目中自己写loader模块；
• 按照惯例，而非必须，loader一般以 xxx-loader ，xxx 代表了这个loader要做的转换功能，比如 json-loader；在引用loader的时候可以使用全名 json-loader 或者使用短名 json。这个命名规则和搜索优先级顺序在webpack的 resolveLoader.moduleTemplates api中定义。

3.installation

npm install --save-dev css-loader
npm install --save-dev ts-loader

4.Using Loaders

使用loaders的三种方法：1.configuration 2.inline 3.CLI

• configuration(recommended)

module: { 
rules: [ { test: /\.css$/,
           use: [ { loader: ['style-loader']  }, 
                    { loader: ['css-loader'] , options: { modules: true } } ] } ] }

• inline

1. !为使用loader的标记，!前为loader模块名称，!后为需要编译的文件.
2. loader模块既可以使用相对路径引用，又可以使用绝对路径引用
3. 可以用链式调用，如下例先通过css-loader，后通过style-loader
4. ?key=value&foo=bar和?{"key":"value","foo":"bar"}表示所设参数

 import Styles from 'style-loader!css-loader?modules!./styles.css';

• CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

5.使用loader加载顺序

四、Plugins

利用plugins可以执行许多loaders无法实现的操作和自定义功能，plugins有两种获取途径：一种是webpack本身内置的，另一种需要通过npm安装第三方插件。

使用plugins，你需要：
1.在头文件引入require模块；
2.在module.exports中引入plugins数组。

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //安装第三方插件
const webpack = require('webpack'); //获取内置插件

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]//需要用new操作符创建新对象

五、Webpack CLI

参见Webpack入门 --唐紫依

参考资料

• webpack v3.8.1 文档
• JavaScript标准参考教程 --阮一峰
• webpack-demos--阮一峰
• 从零开始搭建React同构应用
• Webpack入门 --唐紫依