口出狂言系列之Webpack入门

Webpack了解一下

书接上文,上文就是扯了模块化的历史之类的,那既然说到了模块化,不得不提的就是Webpack这个打包工具了。那么有请Webpack先生自我介绍一哈。


Webpack:”大家好,我是webpack。我是一个打包模块化 JavaScript 的工具,在我眼里,一切皆是模块,通过我哥们Loader转化文件,Plugin注入钩子,最后输出由多个模块组合成的文件。我专注于构建模块化项目。

那么就发个自拍呗:

图为:webpack模块化示意图

经过webpack的打包,所有的文件都会被打包成一个静态文件,网页便可运行。



安装和使用了解一下

那么在用webpack之前,你要知道你的node版本需要在5.0.0及以上。

  • 新建一个文件夹,在文件夹内初始化一个项目 执行 npm init
  • 安装webpack,有两种方式,一种是安装到你的全局,另一种是安装到项目内。我个人建议还是安装到项目内,因为你有可能会有很多个不同的项目用到了不同版本的webpack,有时候会有影响,像目前的webpack4就去除了一些方法,webpack-cli要单独安装等。安装方法如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 这类工具包都装到开发环境内,因为生产环境是不需要这些包的
    // 安装最新稳定版本
    npm install webpack --save-dev
    // 或者是
    yarn add webpack -D
    // 若是安装制定版本的话
    npm install webpack@3.8.0 --save-dev
    // 要是你觉得自己很屌那么就请安装最新体验版了解一哈
    npm install webpack@beta --save-dev
  • 那么目前安装完之后你有两个途径可以运行项目本地的webpack

1、在项目根目录下对应的命令行里通过 node_modules/.bin/webpack 运行 Webpack 可执行文件。

2、在 Npm Script 里定义的任务会优先使用本项目的webpack:

1
2
3
4
// package.json
"scripts": {
"build": "webpack --config webpack.config.js"
}




举个🌰说明表达一下webpack是怎么装逼的

接下来用CommonJS模块化规范编写一个简单的例子,那么现在我们先把html写好,作为一个页面入口,webpack打完包输出的静态资源文件就在此运行。

1
2
3
4
5
6
7
8
9
10
11
// index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 打包输出的 JavaScript 文件-->
<script src="./dist/app.js"></script>
</body>
</html>

写一个函数用作入口的引入

1
2
3
4
5
6
7
8
// insert.js
// 把 str 显示到网页上
function insert(str) {
window.document.getElementById('app').innerText = 'Hello,' + str;
}
// 通过 CommonJS 规范导出 insert 函数
module.exports = insert;

JS入口文件

1
2
const insert = require('./insert')
insert('Webpack')

webpack在执行时默认的情况下,眼里只有webpack.config.js这个脚本文件,那么就新建一个给他吧

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path')
module.exports = {
// 执行入口
entry: {
app: './app.js'
},
output: {
// 把所有以来的模块合并输出到一个脚本里
filename: '[name].js', // 生产文件的名字
path: path.resolve(__dirname, './dist') // 生产文件的地址
}
}

全部文件解构大概就是这样

那么现在全部准备好了,在项目根目录下运行 npm run build 就会发现目录里面多一个个dist文件夹,里面一个app.js脚本赫然在目,栩栩如生。它是一个可执行的js脚本文件,里面包含了insert.jsapp.js 两个模块,依赖关系明确。浏览器打开index.html,几个大字映入眼前“Hello,Webpack”。

打包的基本原理就是webpack会从app.js出发,识别出源码中的模块化导入语句, 递归的寻找出入口文件的所有依赖,把入口和其所有依赖打包到一个单独的文件中。 从 Webpack2 开始,已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

那么再会。