最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅。
因为原来没有用过任何的构建工具与模块化工具,所以本系列会十分的基础。并且可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进。谢谢!
什么是webpack
Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具,在webpack中,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如vue用的是vue-loader
当然这是后话,在后面我们再来说。
https://github.com/webpack/webpack
安装
前提:因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js
,以及npm
。在这里我使用的版本是:node:v8.11.2 ,npm:6.2.0
,若是版本问题,请更新到最新版。
若是有出现npm安装过慢的情况,可以使用nrm这个项目来进行npm源地址的切换。或者使用使用淘宝出品的 cnpm
首先我们直接进行全局的安装,运行如下命令:npm install webpack webpack-cli -g
,可能需要一点时间。
安装成功后,在命令行输入webpack -h
即可查看当前安装的版本信息。以及可以使用的指令。
当然,我们都应该将webapck安装到当前的项目依赖中,此时就可以使用项目的本这样就可以使用项目本地版本的 Webpack。
1 |
# 确保已经进入项目目录 |
安装好之后我们的package.json
的目录应该是这样的:
![](/qrcode.jpg)
1 |
{ |
既然环境都已经安装好了,那么我们就开始来用webpack进行我们的第一个打包运行程序吧!
首先创建一个静态页面 index.html
和一个 JS 入口文件 entry.js
,(这里你想用什么名字都可以,只需要在打包的时候读取文件为该名字就好,不过,到时候就知道这个名字的含义啦!):
1 |
<!-- index.html --> |
1 |
/*** entry.js ***/ |
文件都已经创建成功了,那么就开始我们的打包吧!
由于我们将 webpack
安装在了 项目目录。所以是不会向终端写入 webpack
命令的,这时我们可以像 npm script 中加入命令 :
1 |
"scripts": { |
然后我们运行 npm run start
,就会执行 webpack entry.js --output-filename=./bundle.js --mode=development
。
或者我们可以借用 npm 内置的执行器做到同样的事情 npx webpack entry.js --output-filename=./bundle.js --mode=development
在浏览器中打开index.html
,就能看到我们设置的文字啦!:这是我第一个打包成功的程序
这么简单的功能直接在html中引入不就好了吗?确实是这样的,不过我们这才刚刚开始嘛,不要急。
下面我们再来增加一个文件,名为first.js
内容如下:
1 |
var h2= document.createElement("h2") |
更改 entry.js
:
1 |
document.getElementById('app').innerHTML="这是我第一个打包成功的程序"; |
再来进行一次重复的工作,再打包一次。webpack entry.js --output-filename=./bundle.js --mode=development
,如果成功,打包过程会显示日志:
1 |
Hash: b1cfe7ff9d75ce235dc9 |
Webpack
会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js
。Webpack
会给每个模块分配一个唯一的 id
并通过这个 id
索引和访问模块。在页面启动时,会先执行 entry.js
中的代码,其它模块会在运行 require
的时候再执行。
刷新浏览器,可以发现我们的刚刚的代码已经生效,又有了新的文字出现。
- 本文链接: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/