1、webpack从0到1-开始
这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了理解webpack打包怎样玩的，平时项目开发中所用如ES6语法、less、vue是如何被打包的，是一个比较基础的内容，我也是为了总结一下这方面的知识点，梳理一下个人的知识体系而写下这些文字。
工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0)
git仓库：webpack-demo
1、什么是webpack？
- “webpack is a module bundler.”—webpack官网上打开自我详情就是这句话，它是一个模块打包器。
webpack是一个模块打包工具，可以打包js、图片资源啊等等，功能十分强大，但是在最开始的时候呢，webpack只是个js模块打包工具。现在就让我们回到webpack最初的模样，从怎样用它打包js文件开始。
2、初始化
即然从零开始，首先自然得从git仓库建立开始，怎样详细的从零建一个git仓库我有写过了(->传送门)，这个系列文章代码所对应的git仓库：webpack-demo。
进入到webpack-demo下的chapter1中，输
npm init初始化生成一个package.json文件。（这里一路回车下一步下一步就行，或者者npm init -y直接生成一个默认的文件）
$ cd webpack-demo/chapter1$ npm init -y- 新建一个
src文件夹并在其中新建一个index.js文件：
var div = document.createElement("div");div.innerText = "hello world";document.body.appendChild(div);- 再新建一个html5标准格式的
index.html文件:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack从0到1</title></head><body> <script src="./src/index.js"></script></body></html>- 这样我们基本的一个项目结构及内容就生成了，浏览器打开
index.html文件也能显示出”hello world”。
webpack-demo/chapter1 |- package.json+ |- index.html+ |- /src+ |- index.js3、安装webpack
- 而后我们需要安装下
webpack，可以全局安装也可以本地安装，我推荐本地安装，这样可以避免与他人合作开发时因为webpack版本号不一致而导致的打包问题。具体：官网webpack安装 - 假如你没能绿色上网安装很慢的话可以使用淘宝镜像解决一下。
# 本地$ npm install webpack webpack-cli --save-dev# 全局$ npm install webpack --global--save-dev和--save两个有啥子区别呢？- 后缀那个
--save-dev可以简写为-D，这个会自动把模块和版本号增加到package.json中的devDependencies部分。 - 还有一个后缀
--save可以简写为-S，这个会自动把模块和版本号增加到dependencies部分。
- 后缀那个
在安装一个要打包到生产环境的安装包时，你应该使用
npm install --save，假如你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用npm install --save-dev。请在npm文档中查找更多信息。
—— 引用来自webpack官网教程的解释。还有我网上搜的另一个解释我也觉得很直观啊：
--save-dev是你开发时候依赖的东西，--save是你发布之后还依赖的东西。
比方，你写ES6代码，假如你想编译成ES5发布那么babel就是devDependencies。假如你用了jQuery，因为发布之后还是依赖jQuery，所以是dependencies。
—— 引用segmentfaul提问
- 安装完了以后我么即可以看到
package.json中多出的这几行东西。
{ ...+ "devDependencies": {+ "webpack": "^4.41.5",+ "webpack-cli": "^3.3.10"+ } ...}4、打包js
（1）第一种方式–使用默认打包的模式
- 我们可以直接在命令行中输入:
$ npx webpack执行
npx webpack，会将我们的src/index.js作为入口文件，而后会新建一个dist文件夹和dist/main.js作为输出文件。npx webpack简单一点来说就是会去找项目中本地的./node_modules/.bin/webpack，而后中执行它。
- 这时我们即可以看到项目结构下生成了一个
dist文件夹和打包好的main.js文件了。
（2）第二种方式–使用配置文件打包
- 删掉dist目录，在当前目录下新建一个
webpack.config.js配置文件。
webpack-demo/chapter1 |- package.json |- index.html |- /src |- index.js+ |- webpack.config.js- 配置文件
webpack.config.js中写：
// 引入node中的path模块const path = require('path');module.exports = { // 定义入口文件，告诉webpack我要打包啥 entry: './src/index.js', // 定义输出文件，告诉webpack打包好的文件叫啥，给我放到哪里 output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), },};- 打包，使用
webpack-cli提供的命令行（这就是我们为什么要安装webpack-cli的起因）：
$ npx webpack --config webpack.config.js（3）第三种方式–使用npm脚本
- 上面使用
webpack-cli命令打包的方式不够简洁明了，一般我们会在package.json中的scripts中定义一条命令。
{...+ "scripts": {+ "build": "webpack"+ }...}- 打包，这个大家应该就很熟习了，执行这条命令跟上面使用一样的效果，它会自动的去找文件目录下的
webpack.config.js文件而后执行它。
$ npm run build- 同样，这时我们即可以看到项目结构下生成了一个dist文件夹和打包好的main.js文件了。
5、最后
- 这时
src/index.js文件已经通过webpack打包后输出为dist/main.js了，这个时候我们还得引用它，所以复制一份index.html文件到dist文件夹下。
webpack-demo/chapter1 |- package.json |- /dist+ |- index.html |- main.js |- index.html |- /src |- index.js- 将
dist/index.html文件内容改为：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack从0到1</title></head><body> - <script src="./src/index.js"></script> + <script src="main.js"></script></body></html>- 这时候我们在浏览器中打开
dist/index.html同样也可以看到hello world在屏幕中显示出来了，我们就简单了完成了一个js文件打包的过程。
6、其余
参考链接
- Webpack 4 和单页应用入门
- git教学
- webpack官网
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 1、webpack从0到1-开始
