初识Webpack

标签（空格分隔）：前端

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

1 webpack 的 Hello World

1.1 安装 webpack，初始化项目目录

# 全局安装 webpack
[ahcj@localhost ~]$ npm install -g webpack

# 查看版本
[ahcj@localhost ~]$ webpack -v
3.5.4

# 显示帮助信息
[ahcj@localhost ~]$ webpack -h

1.2 新建和初始化项目目录

# 新建项目目录
[ahcj@localhost test]$ mkdir learn-webpack
[ahcj@localhost test]$ cd learn-webpack

# 初始化项目目录
[ahcj@localhost test]$ npm init

1.3 创建文件和目录

# 创建 app 和 public 文件夹
# app文件夹用来存放原始代码，public 用来存放编译后的文件
[ahcj@localhost learn-webpack]$ mkdir app public
# 创建 index.html   main.js greet.js 
[ahcj@localhost learn-webpack]$ touch public/index.html app/greet.js app/main.js

public/index.html

 

 
 
    Webpack Sample Project

app/main.js

const greeter = require('./greet.js');
document.querySelector("#root").appendChild(greeter());
alert()

app/greet.js

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

1.4 打包生成 public/bundle.js

# 打包
[ahcj@localhost learn-webpack]$ webpack app/main.js  public/bundle.js
Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.4
Time: 79ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.47 kB       0  [emitted]  main
   [0] ./app/main.js 0 bytes {0} [built]

# 访问   
[ahcj@localhost learn-webpack]$ firefox public/index.html

2 使用配置文件

2.1 新建配置文件 webpack.config.js

# 新建配置文件 
[ahcj@localhost learn-webpack]$ touch webpack.config.js

# 配置文件内容
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

2.2 修改 npm 配置文件 package.json

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "",
  "license": "ISC"
}

2.3 执行

[ahcj@localhost learn-webpack]$ npm start

> [email protected] start /home/ahcj/test/learn-webpack
> webpack

Hash: fb1e5f5198028e964873
Version: webpack 3.5.4
Time: 85ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main
   [0] ./app/main.js 102 bytes {0} [built]
   [1] ./app/greet.js 142 bytes {0} [built]

3 搭建本地服务器

3.1 安装 server 模块

[ahcj@localhost learn-webpack]$ npm install --save-dev webpack-dev-server

3.2 修改 webpack.config.js

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    port:8080, //默认监听端口，如果省略，默认为”8080“
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
}

3.3 修改 package.json，添加 serve 命令

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "serve": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^2.7.1"
  }
}

3.4 运行命令，自动打开浏览器并监听文件变化

[ahcj@localhost learn-webpack]$ npm run serve

> [email protected] serve /home/ahcj/test/learn-webpack
> webpack-dev-server --open

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 6a71bf1e9ff28e2b26fb
Version: webpack 3.5.4
Time: 752ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  325 kB       0  [emitted]  [big]  main
  [35] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {0} [built]
  .......省略.......
  [88] ./app/greet.js 142 bytes {0} [built]
    + 74 hidden modules
webpack: Compiled successfully.

4 生成Source Map（使调试更容易）

Source Map 可以让编译后的文件和源文件产生对应关系，让 chrome 可以将错误定位到源文件

修改 webpack.config.js

module.exports = {
  devtool: 'source-map', //在一个单独的文件中产生一个完整且功能完全的source map
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    port:8080, //默认监听端口，如果省略，默认为”8080“
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
}

[参考1：入门Webpack，看这篇就够了][1]
[参考2：webpack 2.2 中文文档][2]
[1]: www.jianshu.com/p/42e11515c10f
[2]: ww.css88.com/doc/webpack2/concepts/entry-points/