webpack入门一

什么是webpack

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

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

webpack工作方式

开始使用webpack

webpack可以使用npm安装，新建一个空的文件夹（此处命名为webpackTest），在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install –save-dev webpack

1、在上述文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

npm init

2、package.json文件已经就绪，我们在本项目中安装webpack作为依赖包。

//安装webpack
npm install –save-dev webpack
3、回到之前的空文件夹，并在里面创建两个文件夹，app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的Javascript模块，public文件夹用来存放之后供浏览器读取文件（包括使用webpack打包生成的js文件以及一个index.html文件）,接下来我们再创建三个文件夹

index.html –放在public文件夹中；
Greeter.js –放在app文件夹；
main.js –放在app文件夹中；

此时项目结构如下图所示
我们再html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包的js文件命名为bundle,js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebpackTest</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

我们在Greeter,js中定义一个返回包含信息的Html元素的函数，并依据CommonJS规范导出这个函数为一个模块：

module.exports = function(){
    var greet = document.createElement('div');
    greet.textContent = 'hello world';
    return greet;
}

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

const greeter = require('./Greeter');
document.querySelector('#root').appendChild(greeter())

正式使用webpack

webpack可以在终端中使用，在基本的使用方法如下：

webpack {entry file} {destination for bundled file}

结果报错：
这里写图片描述

之所以报错是因为我的打包命令是：
webpack app/main.js public/bundle.js 这是旧版本打包方式，新版本打包应该这样：
webpack app/main.js -o public/bundle.js
上面的警告信息是没有设置模式，我们可以设置webpack –mode development/production进入开发模式或生产模式。
最终的在开发模式下打包命令是:
webpack –mode development app/main.js public/bundle.js
可以看出webpack同时编译了main.js和Greeter.js，现在打开index.html，可以看到如下结果：
这里写图片描述

到此我们已经成功使用webpack打包一个文件了。不过在终端中进行复杂的操作，其实是不太容易且容易出错的，接下来看看webpack另一种更常见的使用方法。

使用配置文件来使用webpack

webpack拥有很多比较高级的功能，一般我们可以把它们定义在一个配置文件中。在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，目前的配置主要涉及到的内容是入口文件和打包后的文件存放路径。
有了这个配置之后，再打包文件，只需在终端里运行webpack命令就可以了，是不是简单了很多。

更快捷的执行打包任务

npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令。在package.json中对script对象进行相关设置即可，设置如下：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack"  // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1"
  }
}

现在我们就可以使用npm start打包文件了。

什么是webpack

开始使用webpack

正式使用webpack

使用配置文件来使用webpack

更快捷的执行打包任务

猜你喜欢