Webpack

前言

• Webpack 是一个前端资源加载 / 打包工具。

• 它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

• Webpack 官网

• Webpack 中文网

• Webpack 教程

• Webpack 入门教程

• Webpack 中文指南

• Webpack 快速入门

1、Webpack

• 一个包含前端的项目，里面可能有多个 .js, 多个 .css, 多个静态图片，多个其他前端资源。

• 一些 js 资源彼此之前存在依赖关系，当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度。

• Webpack 就把这些各种各样的静态资源，打包成了一个所谓的 assets，这样浏览器加载起来就快多了。

• Webpack 的运行，是需要依赖 node.js 的运行环境的。

2、配置

• 安装 webpack

  # 安装
  $ npm install -g webpack@1.13.2

• 打包文件

  # 打包 a.js 到 bundle.js 文件里
  $ webpack a.js bundle.js

2.1 配置文件

• 打包文件时，如果文件名比较复杂，每一次敲入也是比较烦心的事情，所以可以采用配置文件的方式。

  // 编辑配置文件 webpack.config.js
  
  module.exports = {
    entry: './a.js',
    output: {
      filename: 'bundle.js'
    }
  };

• 再次运行，就不需要使用 参数了，而是直接运行 webpack 命令就行了。

2.2 多个入口文件

• 有时候，会不止一个 js 文件，会有多个入口文件。

  // a.js 被打包到 bundle1.js, b.js 被打包到 bundle2.js
  
  module.exports = {
      entry: {
          bundle1: './a.js',
          bundle2: './b.js'
      },
      output: {
          filename: '[name].js'
      },
      devServer: {
          port:8088
      }
  }

3、运行

3.1 webpack-dev-server 方式

• webpack-dev-server 其实就是一个微服务器，运行它，也就启动了一个 web 服务器，可以方便地从服务器上打开这个 index.html 了。

  # 安装
  $ npm install -g webpack-dev-server@1.15.0
  
  # 运行
  $ webpack-dev-server --open
  
  # 显示页面
  http://localhost:8080/webpack-dev-server/

• webpack-dev-server 支持热更新。所谓的热更新，即在 webpack.config.js 中的 entry 文件 ( a.js ) 发生了改变之后，会自动运行 webpack, 并且自动刷新页面，立即看到修改之后的效果。

3.2 npm 方式

• 前面的方式，是直接运行 webpack-dev-server 的方式，不过大都数的项目，都会通过 npm 方式启动。

  # 初始化，进行 package.json 配置文件的初始化
  $ npm init -y
  
  # 修改 package.json，增加脚本
  "scripts": {
      "dev": "webpack-dev-server --open"
  },
  
  # 运行
  $ npm run dev
  
  # 测试
  http://localhost:8088/

4、ES6 转 ES5

• ES6

  • ES6 的全称是 ECMAScript 6.0，是下一代的 javascript 语言标准。
  • 因为当前 javascript 标准 (ES5) 对于开发大型的 javascritp 应用支持力度不足够，所以才会推出一个 ES6，期望 js 在大型企业开发领域也有所斩获。

  • ES5 和 ES6 在语法上会有区别。

    // ES5
    var name = "ES5"
    document.write(`hello `+ES5)
    
    // ES6
    const name = 'ES6'
    document.write(`hello ${name}`)

• 因为 ES6 标准推出时间还不够久，所以并不是所有的浏览器都支持 ES6 的运行。因此，需要把 ES6 的 javascript 代码，转换为 ES5 标准的代码，以期能够在当下浏览器上兼容运行。

• 转换工具有很多种，Babel 就是其中的一种。

• 安装 Babel

  $ npm install --save-dev babel-loader@6.2.7 babel-core@6.18.0 babel-preset-latest@6.24.1

• 修改 package.config.js

  module.exports = {
      entry: './a.js',
      output: {
          filename: 'bundle.js'
      },
      devServer: {
          port:8088
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loader: 'babel',
                  query:{
                      presets: ['latest']
                  }
              }
          ]
      }
  }

5、CSS 模块

• 在 Webpack 的概念里，所有文件都是模块。所以一个 css 文件也是模块。

• Webpack 用 css-loader 和 style-loader 把 css 文件作为一个模块打包到 bundle.js 文件里。

• 安装 css-loader 和 style-loader

  $ npm install style-loader@0.13.1 css-loader@0.25.0 --save-dev

• 修改 package.config.js

  module.exports = {
      entry: './a.js',
      output: {
          filename: 'bundle.js'
      },
      devServer: {
          port:8088
      },
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loader: 'babel',
                  query:{
                      presets: ['latest']
                  }
              },
              {
                  test:/\.css/,
                  loader:'style-loader!css-loader'
              }
          ]
      }
  }

• 修改 package.config.js

  # 修改 a.js ，把 style.css 当作一个模块加进来
  
  require("./style.css")
  const name = 'ES6'
  document.write(`hello ${name}`)