22 04月 2020

一. 概述

什么是webpack

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。


二. weback使用流程

创建项目目录（webpack_test）, 目录结构如下

image.png


示例代码

index.html 是主入口，需要将打包后的文件导入

//index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>


app.js 是我们写的模块，并将模块导出

//app.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  return greet;
}


main.js是一个组件，将我们写的模块返回并插入页面中

//main.js
const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());


2. 安装

因为安装webpack要用npm,所以安装之前我们首先要安装node


第一步 要在项目根目录用npm init初始化，生成package.json文件

第二步 安装webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装


webpack4版需要去额外安装webpack-cli

npm install webpack webpack-cli --save-dev



接下来看下配置文件  package.json

image.png


第三步 使用Webpack打包

node_modules/.bin/webpack app/main.js -o public/index.js

  • app/main.js：是入口文件的路径，本文中就是上述main.js的路径

  • public/index.js：是打包文件的存放路径

image.png


image.png


第四步 通过配置文件webpack.config.js来使用webpack

在当前项目文件夹下新创建一个文件webpack.config.js,写入简单的配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径

module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/public", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}

有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或node_modules/.bin/webpack(非全局安装需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路径了，这条命令会自动引用webpack.config.js文件中的配置选项。

image.png


更加方便的打包操作

在package.json中对scripts对象进行相关设置，设置方法如下。

image.png

package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了


npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

image.png