FE - 走向Node与Webpack 之路 - webpack 简单入门

推荐资料 ：

Webpack 中文指南 （写的简洁清晰，更容易里面模块化与webpack 基本知识）

Webpack 入坑之旅系列 （一步一步和vue结合，还行）

Webpack 官方文档 （权威）

一.webpack 是什么

【摘自Webpack 中文指南】Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

其实我也喜欢这个图 ： 【来自webpack官网】

---

二. webpack.config.js

webpack 基本结构配置使用的 CommonJS 规范 进行配置，其实就是使用module.exports 对外提供一个json配置，这个配置包括 :

• entry : 入口文件，一个或多个
• output : 输出配置
• loaders ： 加载器配置
• pugins : 插件配置
• target ： 可能需要 target配置
• resolve ：解决方案： 绝对路径，后缀，别名

示例： webpack.config.js

var webpack = require('webpack')；//加载webpack模块

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=./img/coffe.png"}, //限定文件大小，base64转换
            // {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=./[name].[ext]"}, 指定文件生成路径
        ]
    },
    plugins: [
        new webpack.BannerPlugin('this file is create!')
    ]
}

推荐 webpack 2.0： https://webpack.js.org/concepts/

1. entry

页面入口文件 ，可以配置一个也可配置多个：

规则 1： entry: string|Array

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

相当于 ：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

规则 2 ： entry: {[entryChunkName: string]: string|Array}

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

多应用配置 多个入口文件：

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

---

2.output

文件输出项配置 ，入口文件最终要生成什么文件，放在什么路径；

示例1：

output: {
        path: __dirname, //__dirname node内置函数，只所在的当前命令
        filename: 'bundle.js'//只能是文件名，不能有路径存在
    }

示例 2

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js', //name 指的是 entry的key值 ：app.js
    path: __dirname + '/build'
  }
}

更多 高级内容，待研究！

---

3.loader

【摘】Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

官网提供的Loader清单 ，使用时查看即可！

loader 在使用的时候，必须先安装配置！

//安装 css相关loader
npm install css-loader style-loader

特性 ：

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

示例：

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}//css loader
    ]
  }
}

module.rules 可以在 webpack 配置中指定多个loader ，这是一个简单的方式来显示加载器：

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

---

4. pugins

插件可以完成更多 loader 不能完成的功能 ， 除了webpack 内置插件外，npm 也可以安装第三方插件。

查看官方插件清单

插件简单配置 ：

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('this is file header!')
  ]
}

---

5. resolve

可以配置模块路径（绝对路径），拓展名，别名配置 ，为了方便引用；

resolve: {
    extensions: ['', '.js', '.vue', '.json', '.css']
  }

6. target

可以指定运行环境，比如 ： 使用node webpack将编译的为类似node.js的环境中使用；

查看支持的目标

module.exports = {
  target: 'node'
};

指定多个目标 ：

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

查看更多 target 的内容

---

三. 热更新

开发时，并不想每次修改某一模块就执行命令进行重新编译构建，所以可以通过下面方式进行热更新：

方式 1 ： webpack命令

// 显示编译进度， 颜色 ， 启动监听模式 
webpack --progress --colors --watch

开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次重新编译，当有文件变化时，只会编译变化的文件。

方式 2 : 使用 webpack-dev-server 开发工具

安装 ：

npm install webpack-dev-server -g //全局安装
npm install webpack-dev-server --save-dev //配置到package.json

运行 ：

webpack-dev-server --progress --colors

使用时，它将启动一个express静态资源服务器，并监听和自动运行webpack ，访问地址 ： localhsot:8080 或 localhost:8080/webpack-dev-server/ ; 基本原理是 它启动一个socket.io 服务实时监听变化并自动刷新页面。

---

四.命令总结

# 基本步骤：
##1.初始化package.json
 * npm init -y
##2.安装webpack依赖
 * npm install webpack --save-dev
 * npm info webpack : 查看webpack 信息
 * npm install webpack@1.12.x --save-dev : 安装指定版本的webpack

##3.安装webpack开发工具
 * npm install webpack-dev-server --save-dev
 * npm install webpack-dev-server -g

##4.安装css loader
 * npm install css-loader style-loader

##5.编译显示进度和颜色
 * webpack --progress --colors
 * webpack --progress --colors --watch

##6.快速编译，热更新
 * webpack --progress --colors --watch
 * webpack-dev-server --progress --colors ：使用开发包

##7.安装加载url-loader
 * npm install url-loader --save-dev

##8.缩写
 * --save-dev  : 保存到 package.json 的 devDependencies 依赖中 缩写：-D
 * --save      : 保存到 package.json 的 dependencies  依赖中 缩写 ： -S

##9.安装vue
 * npm install vue -D
 * commonJS 引入 require('vue/dist/vue.js')
 * Babel 引入 import Vue from 'vue/dist/vue.js';