webpack笔记

搭建项目基础

使用npm初始化工程，安装webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

lodash是一个使用的js工具库

npm install --save lodash

如果没有webpack配置文件，默认使用src文件夹下的index.js文件作为入口文件，然后在dist文件夹下生成main.js bundle文件。

Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件。虽然webpack4+可以不使用任何配置文件，但使用webpack配置文件可以更便捷高效的执行命令。如果webpack.config.js存在，默认使用它。下面--config选项表明使用指定名称的配置文件，这对需要拆分成多个配置文件时非常有用。

npx webpack --config webpack.config.js

可以在package.json中添加npm脚本来提供一个执行上面脚本的快捷方式。使用npm的script可以像使用npx那样通过模块名引用本地安装的npm包，因为这是大多数基于npm项目的遵循标准。

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

运行构建命令，生成bundle

npm run build

管理资源

webpack只识别通过import导入的js文件，但是可以通过指定的loader引入指定类型的文件。

加载css文件，通过安装style-loader和css-loader可以import css文件。

npm install --save-dev style-loader css-loader

在webpack.config.js文件中填加module字段，test通过正则匹配哪些文件需要通过下面的方式加载，use指定加载所使用的loader。

module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

现在可以使用import导入css文件了

import './style.css';

加载图片文件，使用file-loader可以将图片资源混合到css中

npm install --save-dev file-loader

module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }

现在使用下面代码时图像资源将被file-loader加载，并处理添加到output目录中，MyImage变量将包含图像在处理后的最终url。如果你查看output目录将会看到类似这样的图像资源名5c999da72346a995e7e2718865d019c8.png。

import MyImage from './my-image.png'

使用loader这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起，而不是将资源单独存放在一个文件夹中，这可以使模块更具有可移植性。

入口起点

入口起点指示webpack使用哪个模块，来做为其构建内部依赖图的起点。每个依赖项都会被处理，最后输出到bundle中。可以配置单个或多个入口起点，多个入口起点常用于分离bundle文件以便按需加载和用于多页面应用中。

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

//上面是下面的简写：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
// 多个入口起点
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

html-webpack-plugin插件https://www.npmjs.com/package/html-webpack-plugin

npm install --save-dev html-webpack-plugin

可以在dist文件夹下自动生成index.html文件，并将自动引用构建好的bundle文件。

plugins: [
    new HtmlWebpackPlugin({
      title: 'OutPut Management'
    })
  ],

clean-webpack-plugin插件https://www.npmjs.com/package/clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

用于清理构建目录的一个插件，默认会清理output目录的所有文件。

使用source map

webpack打包源代码后，很难在bundle文件中找到错误在源代码中为原始位置。为了最终错误和警告js提供了source map功能，source map有很多选项可用，例如下面代码。

devtool: 'inline-source-map'

自动编译代码

有多种方式可以在webpack中自动编译代码，例如：

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

使用观察者模式

添加一个用于启动webpack观察者模式的npm脚本

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

watch模式在每次修改后都会重新编译模块，缺点是每次必须手动刷新浏览器后才能看到效果。

使用webpack-dev-server

webpack-dev-server提供一个简单的web服务器，并能够实时重载。

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

修改webpack.config.js，告诉dev server在哪里查找文件。dev server默认在localhost: 8080创建服务。

devServer: {
    contentBase: './dist'
  }

在package.json中添加启动代码

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "watch": "webpack --watch"
  },

现在运行 npm run start 就可以自动在浏览器中打开页面，修改代码保存后，dev server会自动加载编译后的代码。

使用webpack-dev-middlewarehttps://www.webpackjs.com/guides/development/

mddleware是一个容器，它可以把webpack处理后的文件传递给一个服务器。webpack-dev-server内部使用了它。使用middleware和express可以实现类似dev server的功能。

HMR(hot module replacement)模块热替换

HMR可以在不刷新整个页面的情况下更新模块代码，webpack-dev-server提供的功能是在代码修改后刷新整个页面，但会丢失页面的状态，HMR填补了这个缺陷。要注意的是在使用HMR时要在module.hot.accept中刷新更新后的代码，否者应用使用的仍旧是旧的代码。幸运的是一些常用的loader提供了这种功能，例如style-loader内部实现了这个方法，可以在更新css文件后自动刷新css代码，而无需重新刷新浏览器。

tree shaking

tree shaking 用于移除js上下文中未引用的代码，tree shaking 需要依赖ES2015模块系统中静态结构特性，例如import和export。