Skip to content

Latest commit

 

History

History
251 lines (174 loc) · 7.39 KB

02.md

File metadata and controls

251 lines (174 loc) · 7.39 KB
Raw

Webpack 初体验

webpack 安装。

因为 webpack 是 node 的一个包，所以我们可以通过NPM 来安装。

webpack 支持全局安装和当前项目安装。区别在于：

  • 全局安装之后可以在你的整个电脑上去使用 webpack 这个命令。
  • 当前项目安装，只能在当前项目中通过 node 去启动 webpack。 但是好处是：各个项目可以使用独立的不同版本的 webpack。不至于像全局安装那样在更新之后可能会影响到很多项目。
项目安装 webpack 与 小测试。

我们这里采用当前项目安装的方式。所以，，，我们首先得用个项目啊。

第一步： 建立项目

mkdir webpack-test && cd webpack-test   // 建立一个项目目录，进入
npm init             // 初始化 npm

为了测试自己是否已经全局安装过 webpack 可以在命令行任何地方敲一下 webpack 查看一下。

第二步： 安装 webpack 依赖

npm i -D webpack  // 在当前项目安装 webpack 作为项目的开发依赖。

第三步： 修改 package.json, 配置启动 webpack 的脚本 npm run build。

// package.json  -> scripts -> 添加 build 命令
...
scripts: {
    "build": "wepback"
},
...

现在你可以通过npm run build命令来启动 webpack 了。 尝试一下。。。

你会得到如下报错：

➜  webpack-test npm run build

> [email protected] build /Users/Ben/Work/webpack-test
> webpack

No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

大概意思是说：既没有找到配置文件，也没用命令行的参数。同时告诉了你配置文件可以是在当前文件夹下一个名叫webpack.config.js的文件。同时你可以可以通过 webpack --help 获取命令行的帮助。

既然缺少配置文件，我们就建立一个配置文件吧。

第四步： 编写配置文件。

touch webpack.config.js // 新建配置文件

编写配置文件如下：

// webpack.config.js
module.exports = {
    // 第一要素： 入口文件
    entry: './src/main.js',
    // 第二要素： 输入配置
    output: {
        path: './dist',
        filename: 'main.bundle.js'
    }
}

在此运行 npm run build

又报错了....

➜  webpack-test npm run build

> webpack-test@1.0.0 build /Users/Ben/Work/webpack-test
> webpack

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./dist" is not an absolute path!

意思是说：配置对象不合法。所提供的 output.path 值不是一个绝对地址。

哦，原来在配置对象中 output.path 地址一定要是一个绝对地址。

那我们修改配置文件如下：

module.exports = {
    //...
    output: {
        path: '/{youProjectDirectory}/dist',  // {youProjectDirectory} 使用你的项目文件夹的绝对地址。
        // ....
    },
    // ...
}

有人会问： 如果有一天我的项目文件夹地址改动了，岂不是要回来改？有没有更好的写法？

答案肯定是有的，我们可以通过 Node 的 path 包来动态计算当前项目的绝对地址。如下：

const path = require('path');
module.exports = {
    //...
    output: {
        path: path.resolve(__dirname, './dist'),
        // ....
    },
    // ...
}

注：绝体的 path 包的API用法，请参考 Nodejs Path 官方文档。

改好之后再次运行 npm run build。

果不其然，，，又报错了。。。

➜  webpack-test npm run build

> [email protected] build /Users/Ben/Work/webpack-test
> webpack

Hash: 1e613feb0dc7da59be73
Version: webpack 3.5.4
Time: 41ms

ERROR in Entry module not found: Error: Can't resolve './src/main.js' in '/Users/Ben/Work/webpack-test\'

报错信息告诉我们：错误发生在入口模块找不到。无法在 '/Users/Ben/Work/webpack-test' 下解析出 './src/main.js'。

对哦，我们虽然指明了我们要打包的入口在哪里，但是还没有写这个入口文件呢。

第五步： 写入口文件

按照你写的配置的配置地址，写一个入口文件 main.js

也可以在任何一个地方写一个入口文件，然后把webpack 配置文件的入口地址和它对应起来。

alert(123);  // 我们就写一个 alert(123)作为测试

确认配置的入口地址和真实的入口文件地址对应起来之后，再次运行 npm run build。

➜  webpack-test npm run build

> [email protected] build /Users/Ben/Work/webpack-test
> webpack

Hash: 57edaed1795c2069638a
Version: webpack 3.5.4
Time: 72ms
         Asset     Size  Chunks             Chunk Names
main.bundle.js  2.48 kB       0  [emitted]  main
   [0] ./src/main.js 11 bytes {0} [built]

哇，，，终于没有报错了。那到底有没有打包成功呢？

第五步： 验证打包文件

去你配置的输出目录查看，是否有打包文件生成。这是最基本的。

然后新建一个 index.html 通过引用打包后的文件来查看打包是否成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./dist/main.bundle.js"></script>
</body>
</html>

如果能正确的弹出 123 的提示框，证明打包成功。

第六步： 编写项目代码

有人可能会问：我们也可以直接在 html 里面引用 './src/main.js' 啊，何必还要打包，这么麻烦。

上面我们只是用了一个单文件证明了打包流程跑通了，还没用到多文件的依赖，下面我们就要写多个相互依赖的 js 文件了。

分别在 './src/js/' 下新建两个文件 a.js 和 b.js， 内容如下：

// a.js
export const sayHello = function(name) {
    alert('Hello' + name);
}
// b.js
import { sayHello } from './a';
sayHello('Ben');

修改 main.js 如下：

// main.js
import './js/b'; // 支持相对路径的写法

然后再次运行命令：npm run build，查看打包后的文件，依然只有一个。

之后打开浏览器预览：应该可以看到弹出 Hello Ben 的弹出框。

到现在为止，我们演示了如何通过 wepback 来分析依赖，然后打包多文件到一个文件并且运行成功。

我们分析一下上面的小例子:

  • main.js 依赖 ./js/b.js。
  • b.js 依赖 a.js 提供的 sayHello 方法。

一个大的项目会有非常多非常多的依赖文件，不管是自己编写的文件，还是第三方的包文件，最终都将通过 webpack 的依赖分析打包成一个或者多个文件。

问题：

  • 刚才我们每次编写一次代码，就要 npm run build 一次，或者说是打包一次，岂不是很麻烦，有没有自动检测文件变化，然后自动打包的？
  • 打包完成之后要验证代码，要手动刷新浏览器，有没有更好的办法？
  • 上面只是演示了对 js 文件的打包，所谓的一切皆模块儿的概念没有体现呢，如何做？
  • 这里只用到了四大概念中的 entry 和 output ，另外两大概念的 loaders 和 plugins 如何使用？
  • 第三方的 node modules 如何通过 webpack 打包到我们的项目中？

预知后事如何，且听下回分析。