Webpack的学习（一）

webpack中文文档

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

先理解四个核心概念：

• 入口(entry)
• 输出(output)
• loader(加载器)
• 插件(plugins)

什么是Webpack ？

从本质上来讲，webpack是一个现代化的JavaScript应用的静态模块打包工具。

webpack的安装

webpack依赖于node环境， node.js自带了软件包管理工具 npm
(node package manager)

• 首先安装node环境

• 全局安装webpack

    npm install [email protected] -g
  

• 局部安装webpack（后续才需要）

  • --save-dev 是开发依赖，项目打包后不再继续使用的。

    npm install [email protected] --save-dev
  

为什么全局安装后，还需要局部安装呢？

• 在终端直接执行webpack命令，使用的是全局安装的webpack
• 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的时局部webpack

打包命令

webpack ./src/main.js ./dist/bundle.js

webpack ./src/main.js ./dist/bundle.js

使用局部webpack

在项目目录下创建 webpack.config.js

const path = require('path')

module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        path: '', // 动态获取路径
        filename: 'bundle.js'
    },
}

命令行输入 npm init

> npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
# 名字，不能识别中文
package name: (01-webpack起步) meetwebpack
version: (1.0.0)
description:
entry point: (webpack.config.js) index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to G:\vscode\vue.js\webpack学习\webpack的基本使用\01-webpack起步\package.json:

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

在package.json, 如果有依需要安装，运行 npm install

package.json：通过npm init生成的，npm包管理的软件（暂时没有用上，后面才会用上）

webpack.config.js

const path = require('path')
console.log('当前文件所在路径: ' + __dirname)
module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // __dirname是node中的，用获取当前文件所在路径
        path: path.resolve(__dirname, 'dist'), // 动态获取路径
        filename: 'bundle.js'
    },
}

再打包的时候， 直接使用 webpack 命令即可

在package.json文件中的scripts中放入我们需要执行的命令，使用 npm run 对应的键 ，当我们执行的命令比较长时，我们可以将它封装在scripts中。

例如：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },

这里添加build对应 webpack，当我们再次使用打包命令的时候，就可以使用下面命令。

npm run build

在本项目中安装局部的webpack

npm install [email protected] --save-dev

装完之后，会更新package.json中的数据

{
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    开发时依赖
    "devDependencies": {
        "webpack": "^3.6.0"
    },
   运行时依赖
    "dependencies": {

    }
}

各种不同的loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

样式

• style-loader 将模块的导出作为样式添加到 DOM 中
• css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
• less-loader 加载和转译 LESS 文件
• sass-loader 加载和转译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
• stylus-loader 加载和转译 Stylus 文件

使用css文件，安装css-loader、style-loader

安装css-loader命令 --save-dev 开发时依赖

npm install --save-dev css-loader

安装style-loader命令

npm install --save-dev style-loader

在webpack.config.js中添加配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
          // css-loader只负责将css文件进行加载
          use: ['style-loader', 'css-loader']  // 使用多个loader时，顺序是从右向左的
          // style-loader用来解析css文件
      }
    ]
  }
}

图片文件的处理

url-loader和file-loader

查看原文|查看仓库|编辑此页

Loads files as base64 encoded URL

loader安装

url-loader

npm install --save-dev url-loader

file-loader

npm install --save-dev file-loader

webpack.config.js配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
                // 当文件小于limit的值时，会将图片编译成base64的字符串形式
                // 当文件大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
               // [name] 原图片的名字 + 8位的hash， [ext] 原后缀名
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}