Webpack学习笔记与填坑记录

起源

最近在做一个项目啦，用webpack打包。

学习

打包工具是一种可以极大减轻前端开发工作量的存在，目前据我接触过的有webpack、百度的fis、当时在腾讯实习时候同事自己开发的mt，个人认为这种工具的要点有以下几个：

• 路径解析，包括绝对路径、相对路径、模块路径等
• 依赖关系构建，通过依赖关系，从入口开始，将所有资源打包到出口
• Loader，具备对jxl、less等多种非js语言解析功能
• 辅助功能，通过增加Plugins，实现压缩、模块防重复打包等。
• 往往存在辅助开发工具，如 webpack-dev-server，提供一个简单的web 服务器，在开发时，实时重新加载，如webpack watch，代码改了就重新编译。

路径解析

绝对路径和相对路劲就不多说了。这里说说模块路径。

import或者require中只给了模块名称，webpack会从那里找它？
webpack对于模块路径，默认查找的地址是”node_modules”，然后可对其祖先路径进行查找， ./node_modules, ../node_modules。
通过配置，可以指定一些地址有限查找。

modules: ["node_modules"]//默认配置
modules: [path.resolve(__dirname, "src"), "node_modules"]//可配置优先查找的位置

关于路径的，还有一些别的东西：
1.给路径设置别名。

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/')
}
/************************************************/
import Utility from '../../utilities/utility';
import Utility from 'Utilities/utility';

2.增加扩展

extensions: [".js", ".json"]

都是一些具体配置的技巧，可以在实际使用时再掌握。路径解析的规则怎么配置，主要还是看能不能让开发的时候代码写的更方便，后续更改的时候，更简单。

依赖关系构建

入口

入口可以有一个（字符串），也可以有多个（数组，对象），还可以是个返回以上变量类型的函数，以实现动态指定入口路径。

entry:string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })

输出

相比于入口，输出的配置要更多，除了指定输出的地址path和文件名filename，还有一些别的配置，比如增加注释.

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }

Loader

Loader的作用，就是让打包工具具有加载js之外文件的能力。
要使用它们，必须先进行安装。
使用的方法有三种：
1、在打包工具的配置文件中进行配置。【推荐】
比如下面的webpack，就配置了一个txt文本的loader。

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }  //一个txt加载器
    ]
  }
};

module.exports = config;

图片加载器：

npm install url-loader --save-dev

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
　　　　}
　　]
} 

test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名。

2、内联。
可以在 import 语句或任何等效于 “import” 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

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

3、CLI，命令行。

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

Plugins

插件的功能多种多样，插件的存在，也让打包工具具有更大的灵活性。一方面方便开发操作，一方面也可以优化输出的资源。

比如压缩图片的插件，比如提取重复代码的插件，比如分离代码协助懒加载功能的实现。

辅助开发

观察模式

在package.json里增加watch配置，如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。

    "scripts": {
      "watch": "webpack --watch",
      "build": "webpack"
    },

webpack-dev-server

这个工具需要额外安装，提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

npm install --save-dev webpack-dev-server

然后在配置文件中，进行设置。

//在 localhost:8080 下建立服务，将 dist 目录下的文件,作为可访问文件。
  module.exports = {
   devServer: {
     contentBase: './dist'
   },

待更新ing