webpack系列学习01——hello webpack

自从换新工做后，天天10点上班，6点多下班，20多岁过起了养老的生活。通过一个多月的自我挣扎，终于开始决定天天回家后不能再颓废了。定个目标，每周至少三篇原创博客。自行监督，若是作不到，（再说）。
就先从webpack下手吧。先说一句，强烈建议看官方文档，这个webpack也有中文版的，并且也不是很难懂，照着敲一边基本上就懂了，我就是这么学的。
官网传送门：webpack中文网
若是你不想看官网，fine，跟着这个系列学吧，也不会让你失望的，我拿湖人今年的总冠军奖杯保证。
本系列教程代码同步更新至github，欢迎围观和star。
github传送门：https://github.com/JerryYuanJ/webpack-learn
废话很少说，开始吧。

新建项目

建立一个文件夹 01-hello-webpack，而后在根目录下输入命令，npm init 开始项目的初始化。你能够根据提示一步步的填写，最后他会在根目录下根据你的填写内容自动给你生成package.json文件，若是你嫌麻烦，能够直接在 npm init 后面添加参数-y 表示遵循默认配置：

npm init -y

我生成的package.json文件如图：

{
  "name": "01-hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
  "author": "Jerry",
  "license": "ISC" }

安装webpack

很简单，在项目根目录下输入命令：

npm install webpack --save-dev

提示：install能够简写成 i , --save-dev 能够简写成 -D (大写)，因此以上命令也能够写成

npm i webpack -D

这时你的package.json中会多出这些：

"devDependencies": {
    "webpack": "^4.16.2"
}

表示咱们已经成功安装了版本为4.16.2的webpack了，可是要注意，webpack4之后命令行工具再也不集成在webpack包里面了，须要再运行一个安装命令行工具(webpack-cli)的命令，咱们能够试试上面的简写：

npm i webpack-cli -D

安装结束后它也会出如今devDependencies里面，和webpack相依为命。

提示1：若是下载速度慢，请换成cnpm淘宝镜像。
提示2：最好不要全局安装，除非你很自信。

hello webpack

首先呢，咱们在项目根目录下新建两个文件夹，一个src用于存放咱们的源码，一个dist用来存放打包后的代码。而后在dist文件夹中新建一个空的hello.html 文件，在里面引入这样的js脚本：（这里的hello.js名字是随便取的，不过要和执行打包命令的时候保持一致）

<script src="hello.js"> </script>

如图：

接着咱们在src中新建一个hello.js文件，里面简单写一点东西：

document.writeln(`
    <h1>hello webpack</h1>
`)

往页面上打印hello webpack，符合本文主旨，点名主题。
至此，整个项目的结构是这样子的，很简单。

准备工做完毕，接下来能够干正事了。
慢着，我还要给你介绍一个命令：npx，简单了解一下，它是node v8.2+版本之后出来的，它能够临时安装可依赖程序，用完自动删，不用担忧全局污染；他能够执行依赖包中的命令；他能够自动加载node_modules中的依赖包，不用指定路径等等等等….这里只是稍微提一下，具体好处有哪些，你能够本身百度。
这里咱们能够用npx在根目录下来执行咱们的webpack命令，

npx webpack ./src/hello.js -o ./dist/hello.js

这段话表示，webpack会使用src目录中的hello.js为入口来打包，把打包后的js文件输出到dist目录中而且也命名为hello.js。这里的打包后的名称，要与以前在hello.html中引入的script脚本的名称要一致。命令运行完之后会在dist目录下多出一个hello.js文件。如图：

打包后的文件，是通过webpack压缩优化处理的，不用管它。咱们能够在里面看到咱们源代码中写的hello.js中的代码：

这时候运行hello.html你能够发现，hello.js中的代码正常运行：

若是你不想用npx，也能够直接使用node_modules中webpack命令：

./node_modules/.bin/webpack src/hello.js -o dist/hello.js

window上若是要使用路径的方式调用webpack命令的话，须要反斜线：

.\node_modules\.bin\webpack src/hello.js -o dist/hello.js

效果应该是同样的。若是不同，你就错了。
至此，webpack的初体验就结束了。这个例子没有体现出webpack做为一个模块打包机的功能，因此，你本身练习的时候，能够在hello.js中import其余的模块，好比jquery，lodash或者本身定义的js等，而后在代码中使用这些模块的一些功能或者变量，看看webpack是否是也能打包，打包后的js是否是能够运行。这里我就再也不举例子了，否则上面的都要重写了。

使用配置文件

快结束了，再忍忍。
相比你敲了上面的命令后会有这样的想法，在命令行输入参数多不方便，我万一输错了改的话也十分麻烦，并且实际项目中的配置可能不少，若是都要在命令行输，那我不干了。
ok，webpack提供了配置功能的，并且能够结合npm脚本更加方便的使用。
首先咱们在项目根目录下新建一个配置文件webpack.config.js，输入如下内容：

const path = require('path')

module.exports = {
    entry: './src/hello.js',
    output: {
        filename: 'hello.js',
        path: path.resolve(__dirname, 'dist')
    }
}

我相信你能猜出来什么用了，就很少废话了。至于path是什么，path.resolve是干什么的，你能够去查阅node的基本用法。简单说一下，path是node中的一个模块，path.resolve是把相对路径转化成绝对路径的，__dirname 表示当前执行脚本所在的目录（你能够本身打印出来看看）
接下来，你要删除掉dist中原来打包好的hello.js文件，而后在根目录下输入以下命令进行打包：

npx webpack --config webpack.config.js

效果应该是如出一辙的，运行结果也是没变。
提示：webpack.config.js 是默认的webpack配置文件名，即若是你上面的命令只输入npx webpack 也是ok的。这里加config参数只是说明，webpack能够支持任何名称的配置文件，十分灵活。

添加npm script

在package.json中添加一个运行脚本：

"build": "webpack"

为何只写webpack不用再说了吧。
这时候，在命令行运行 npm run build 便可达到同样的效果了。使用npm的scripts，就跟使用npx同样，能够经过模块名引用本地安装的 npm 包，很是方便。
最后看一下是否是对的吧。

Ok

代码已上传至github，若是本文对你有帮助，请在github上给个star，谢谢。
github传送门：https://github.com/JerryYuanJ/webpack-learn