纯新手向
在学习webpack之前，我们必须已经了解了，什么是前端模块化开发。
每一个新手开发者去学习一项新的技术时，查阅官方文档，会发现文档里写的每一个字，自己都认识，但是连在一起就不认识了。 我在刚开始读webpack指南时就是这种感觉。现在我将自己对于webpack的认识写下来作为一点小总结。
对于为什么要用webpack，就不说了，它要做的事情就是把你需要的很多模块打包成一个，在webpack的概念里万物皆模块，就是说js，css，图片，字体，json等等，都看成模块。我们在本地直接写JS，不管是 CommonJS/ AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS，这就是为什么它被称为“预编译模块的方案”的原因。话不多说开始操作。
1.创建一个项目，在里面安装webpack
这个项目的结构是这样的，先用npm init创建一个package.json，然后里面创建两个文件夹，一个是项目的发布版本dist，另一个是开发时用的源代码src。
在里面分别创建相应的文件，留意src里有两个js，一个是main，另一个是一个js模块，在main里引用这个模块，来模拟工作时的情景。下面会讲到方法的。
其实webpack的功能就是把别的文件夹(src)里的模块打包到发布版dist里。
用npm install --save-dev webpack命令安装。安装好之后应该是这样的项目结构
结构
2.如何实现打包？
在html里写上内容，最基本的那些，比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>hi</div>
<script src="bundle.js"></script>
</body>
</html>
你会问这个引入的bundle.js是哪里来的？其实它就是webpack把资源都打包到这个bundle.js里了，它会在之后我们运行webpack时生成。我们只需引入它就完成了使用。
接下来在main.js里引入module模块。具体操作：
在module.js里写
module.exports = function () {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
在main.js里写
const greeter = require('./module.js')
document.querySelector('#root').appendChild(greeter())
注意你可能会疑惑为什么要这么写？因为这是commonJS模块化的规范。它规定了创造和引入模块就要这么来做。用modelu.exports来暴露模块接口，用require来引用模块。
3.正式运行webpack
运行webpack有三种方式：
- 命令行命令路径
- 命令行命令配置文件
- 用npm script运行配置文件
第一种方式，在命令行里指定出入口。入口就是在哪获取需要打包的模块，出口就是在哪生成已完成的js。
在本例中，用node_modules/.bin/webpack src/main.js dist/bundle.js 运行之后你会发现dist里多了一个bundle.js，而预览index.html多了一行字Hi there and greeting! 我们成功了。
但是，总是在命令行里指定出入口未免不妥。
好在有第二种方法：把出入口写在配置文件里。
在test下新建一个webpack.config.js 这是我们的配置文件，在里面写：
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
运行webpack时在终端敲node_modules/.bin/webpack，无需设置出入口了。这样子是方便了一点，但还有更方便的办法。
第三种方法，用npm script。在package.json里修改
{
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1"
}
}
然后终端里只需输入npm run build (～￣▽￣)→))￣▽￣)o打包好了！
这里我们已经大致了解了webpack的基本工作原理和操作过程，其实webpack的功能远不止此。它还有构建本地服务器，生成source map来调试程序，打包css，图片等一系列功能。但是你明白了webpack是什么东西，它怎么用之后，这些都是一些扩展了，无非是下载一些插件，又在webpack.config.js里添加参数就行了。
这里是官方文档，便于查阅 webpack中文文档
网友评论