webpack入门——构建简易版vue-cli
前言:(面试让介绍webpack,你可以这么答)简单地说,Webpack其最核心的功能就是 解决模板之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并成一个JS文件(比如bundle.js)。这个整个过程也常常被称为是 模块打包。换句话说,Webpack是一个指令集合的配置文档,然后通过配置好的这些指令去驱动程序做一些指令要求要做的事情。而这些动作都是通过自己写的规则去做编译,而且通过JavaScript的引入(import
)语法让Webpack知道需要它帮忙编译什么东西(比如Pug、Sass等等)。所以我们始终会有一个入口文件(比如index.js
)注入那些Preprocess,让那些Preprocess可以通过这些入口文件的JavaScript让Webpack去根据相关的配置指令编译它,然后打包到一个出口文件中,比如bundles.js
。
用vue-cli1/2搭建一个vue项目时,可以看到有很多关于webpack配置的文件。我们不需要知道那些繁琐的配置文件有什么作用,只需在控制台输入npm run dev
,项目自动启动,我们就可以愉快的写业务代码了。
虽然vue-cli帮我们做好了一切,我们就能不用学webpack了吗?NoNoNo...现代前端工程师必备的技能就是模块化构建打包项目,不信去那些招聘网站的前端JD看看。废话不多说,下面让我们用webpack构建一个简单的vue-cli。
第一步:安装NodeJS(webpack基于NodeJS)
下载地址:http://nodejs.cn/download/,傻瓜式安装,一直下一步就ok。安装完毕,在控制台输入node -v
检查是否按照成功。
NodeJS是JavaScript的运行环境,像浏览器一样。安装之后可以通过
node
命令运行JavaScript代码,比如:node a.js
npm(node package manage of JavaScript)作用:Node.js下载后自带npm,类似于迅雷下载资源,可以下载项目所需的依赖模块/包。
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
npm是国外的,可能会比较慢,建议安装cnpm,安装方法:npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步:npm init
初始化生成package.json
- 首先建立一个空的项目文件夹,
- 进入文件夹,
shift+右击
,出现【在此处打开命令窗口(W)】, - 点击进入
cmd
控制台,命令路径即为当前文件夹目录, - 然后输入
npm init -y
,回车,之后会在根目录创建一个package.json。
package.json用来存放整个项目的依赖模块/包,当我们把整个项目迁移到别的地方使用时,项目运行时会根据package.json的依赖参数自动下载所需模块/包。
第三步:安装webpack
建议安装wepack3,webpack4对vue-cli的兼容还不是很好
命令:npm install webpack@3.12.0 --save-dev
测试webpack在本地是否可用,webpack -v
如果出现webpac
k为无效命令,则使用全局安装webpack:npm install webpack@3.12.0 -g
。安装成功后就可以使用webpack
命令玩耍了。
webpack可以看做是模块打包机:所有资源都可以当成模块,经过loader
处理,最后打包成一个文件。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
webpack核心模块:
- entry: 入口文件,可以多个
- output:出口文件,只能一个
- loader:帮助webpack处理js以外的文件
- plugins:增强webpack的能力,做更多的事
第四步:webpack打包模块
很多文件类型,比如vue、css、img、字体...需要我们配置相应的loader才能完成正确解析并打包。
比如,把css打包到js文件中,需要安装css加载器,安装命令:npm install --save-dev style-loader css-loader
css-loader
和 style-loader
,二者处理的任务不同
css-loader
使你能够使用类似@import 和 url(...)
的方法实现 require()
的功能
style-loader
将所有的计算后的样式用<style></style>
加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
命令行打包(不推荐):
webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动创建dist目录
这种打包方式,在js文件中引入css文件时要注明loader
:require('style-loader!css-loader!../css/index.css')
注意顺序不能错!
配置文件打包(推荐):
需要在项目的根目录创建webpack.config.js.项目里配置如下:
module.exports = {
entry: __dirname + "/src/main.js",// 入口文件,可以多个
output: {
path: __dirname + "/dist", // 绝对路径,打包后的文件存放的文件夹
filename: "build.js" // 相对路径,打包后输出的文件
},
// 1. 不同webpack版本配置loader的方式不同,webpack3用loaders,webpack4用rules
// 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以写成 require('../css/index.css')
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpg|png|jpeg|svg)$/,
loader: 'url-loader',
options: {
// 大于10000字节会被打包成重命名的图片资源,否则打包成base64
limit: 10000
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env'], // 处理关键字,es6/7/8/9...都能转化
plugins: ['transform-runtime'] // 处理函数
}
}
]
}
}
package.json中配置
scripts:{"build": 'webpack'}
(webpack
命令会默认运行webpack.config.js
文件),执行npm run build
即可打包
第五步:搭建webpack服务器
上面4步就可以完成项目的打包任务,但是开发环境还需要更进一步配置。
webpack-dev-server
可以像php/java/.net...一样搭建为我们搭建一个服务器,这样就可以热更新项目代码,实现实时运行项目,进而方便我们调试项目。
- 安装:
npm install webpack-dev-server -g
- 写入到依赖:
npm install webpack-dev-server --save-dev
- 配置命令:
scripts:{"dev": 'webpack-dev-server --hot --inline'}
// 实现热更新和在线编译 - 运行命令:
npm run dev
- 输入localhost:8080/运行... // webpack-dev-server的默认端口是8080
具体代码见:https://github.com/cwh2407606301/webpack-vue-cli
最后,webpack版本更新很频繁,各种npm包也更新很频繁,这就会导致一个兼容问题,动不动就报错,这点很让人头疼,很容易会导致从入门到放弃。耐心,耐心,耐心....