webpack学习笔记（二） webpack入门

了解webpack

安装webpack

npm install webpack webpack-cli --save-dev

执行webpack

通过

npm bin
复制代码

显示可执行文件的确切路径。在本章example中路径如下：

.../node_modules/.bin
复制代码

知道了路径便可以运行webpack了

node_modules/.bin/webpack
复制代码

运行了webpack后在终端得到一下信息

...
Hash: ecb5acad8db11006ead1
Version: webpack 4.28.3
Time: 50ms
Built at: 2019-01-05 14:29:04

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/******/study/webpackstudy/chapter 01'
复制代码

这里面比较关键的信息是：

1、hash表示构建发生任何变化时，哈希值都会发生变化，在部署时可以通过hash值来确认静态资源是否有效。

2、webpack的版本号。

3、webpack打包所花费的时间。

4、构建的时间。

5、警告信息，提示开发者webpack没有设置mode，所以这次打包默认是以production进行的。

6、错误信息，没有找到这次打包的入口文件。

7、默认入口是 ./src

设置静态资源

加入静态资源

src/component.js

export default (text = "Hello world") => {
    const element = document.createElement("div");
    element.innerHTML = text;
    return element;
  };
复制代码

src/index.js

import component from "./component";
document.body.appendChild(component());
复制代码

终端输出

Hash: 277dec5c142883fb60ff
Version: webpack 4.28.3
Time: 107ms
Built at: 2019-01-05 15:04:05
  Asset      Size  Chunks             Chunk Names
main.js  1.04 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 231 bytes {0} [built]
    | ./src/index.js 77 bytes [built]
    | ./src/component.js 154 bytes [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
复制代码

与之前的的打包信息相比，这一次打包的信息新增了以下信息：

1、静态资源，main.js 1.04 KiB 0 [emitted] main 分别是静态资源的名字大小以及chunk的id等信息。

2、[0] ./src/index.js + 1 modules 219 bytes {0} [built] 分别表示入口静态资源，名字，大小，chunk ID以及它是怎么产生的。

配置html-webpack-plugin

首先安装html-webpack-plugin

npm install html-webpack-plugin --save-dev
复制代码

然后书写配置文件

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack demo",
    }),
  ],
};
复制代码

通过

node_modules/.bin/webpack --mode production
复制代码

终端上有了新的信息

Hash: 07c799bad2b58e0c49d6
Version: webpack 4.28.3
Time: 345ms
Built at: 2019-01-05 15:36:07
     Asset       Size  Chunks             Chunk Names
index.html  181 bytes          [emitted]
   main.js   1.04 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 231 bytes {0} [built]
    | ./src/index.js 77 bytes [built]
    | ./src/component.js 154 bytes [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
复制代码

与之前打包的信息相比，这个打包多了与html相关的信息。

Child html-webpack-plugin for "index.html":表示这是插件相关的输出。
复制代码

根据之前的工作，我们可以得处一些，肉眼可见的结论：

首先，webpack的默认入口文件是./src,然后出口是./dist而且打包过后的js文件起名字为main.js。
在使用 html-webpack-plugin 插件时，webpack会将js文件注入到出口文件的html中。
复制代码

增加一个npm 命令

package.json

"scripts": {
  "build": "webpack --mode production"
},
复制代码

webpack-dev-server

如果像我们之前那样开发应用，每修改一处代码就需要重新打包，这样的开发体验很不好。下面我们介绍两种方式实现代码的自动更新。

--watch

npm run build -- --watch
复制代码

这样便可以对编写的代码进行实时的监听，dist中的代码会实时的根据src的代码改变而改变。

webpack-dev-server(WDS)

WDS是运行在内存中的服务器，当代码改变的时候dist中的代码并不会发生改变， 但是内存中的代码会发生变化，这有利于开发者调试，而且WDS提供了HMR功能。

开始WDS

npm install webpack-dev-server --save-dev
复制代码

通过 node_modules.bin\webpack-dev-server 便可实现WDS的功能。我们将命令加入package.json中这样更方便的实现项目的启动。

package.json

 ...
     "start": "webpack-dev-server --mode development"
 ...
复制代码

配置WDS

...
 devServer: {
        stats: "errors-only", // 终端只显示错误信息
        host: process.env.HOST, 
        port: process.env.PORT,
        open:true // 运行过后自动打开浏览器
    }
...

复制代码

当然还有一些其他的设置，比如

...
module.exports = {
  devServer: {
    ...

    overlay: true,

  },
  ...
};
...

复制代码

这样可以将错误打印在浏览器上，并形成一个遮罩层，像这样：

webpack配置实现更新

我们实现了devserver中的代码实时更新，如果webpack配置文件中的代码更新了呢？

我们可以使用工具 nodemon 。

npm install nodemon --save-dev
复制代码

package.json

"scripts": {
  "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --mode development\"",
  "build": "webpack --mode production"
},
复制代码

wds的基本功能实现了，虽然它还有很多的特性，在这里就不详述了。

管理webpack配置

通过merge组合配置

在开发的过程中，webpack的文件会根据不同的环境进行配置，所以，我们不可能把所有的配置都写在一个文件中。就像Object.assign和Array.concat一样，webpack-merge 被开发出来。

> merge = require("webpack-merge")
...
> merge(
... { a: [1], b: 5, c: 20 },
... { a: [2], b: 10, d: 421 }
... )
{ a: [ 1, 2 ], b: 10, c: 20, d: 421 }
复制代码

安装merge

npm install webpack-merge --save-dev
复制代码

我们将之前的配置都重新组装

webpack.parts.js

module.exports = ({ host, port } = {}) => ({
    devServer: {
      stats: "errors-only",
      host, // Defaults to `localhost`
      port, // Defaults to 8080
      open: true,
      overlay: true,
    },
  });
复制代码

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const devServer = require('./webpack.parts')
const merge = require("webpack-merge");

const commonConfig = {
    plugins: [
        new HtmlWebpackPlugin({
            title:'Webpack demo'
        })
    ],
}
const developmentConfig = merge(
    devServer(
        {
            host: process.env.HOST,
            port: process.env.PORT,
          }
    ),
    commonConfig
)
module.exports = mode => {
    if(mode === 'production') {
        return 
    }
    if(mode === 'development') {
        return merge(developmentConfig,{ mode })
    }
}
复制代码

理解 --env

package.json

...
"scripts": {
  "start": "webpack-dev-server --env development",
  "build": "webpack --env.target production"
},
...
复制代码

在build环境下接收到的参数是一个对象{ target: "production" },在development环境下接收到的是一个字符串。