用 vue-cli1/2 搭建一个 vue 项目时, 可以看到有很多关于 webpack 配置的文件. 我们不需要知道那些繁琐的配置文件有什么作用, 只需在控制台输入 NPM run dev, 项目自动启动, 我们就可以愉快的写业务代码了.
虽然 vue-cli 帮我们做好了一切, 我们就能不用学 webpack 了吗? NoNoNo... 现代前端工程师必备的技能就是模块化构建打包项目, 不信去那些招聘网站的前端 JD 看看. 废话不多说, 下面让我们用 webpack 构建一个简单的 vue-cli.
第一步: 安装 Node.JS(webpack 基于 Node.JS)
下载地址: http://nodejs.cn/download/ , 傻瓜式安装, 一直下一步就 ok. 安装完毕, 在控制台输入 node -v 检查是否按照成功.
Node.JS 是 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 如果出现 webpack 为无效命令, 则使用全局安装 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 包也更新很频繁, 这就会导致一个兼容问题, 动不动就报错, 这点很让人头疼, 很容易会导致从入门到放弃. 耐心, 耐心, 耐心....
来源: https://www.cnblogs.com/chenwenhao/p/10962365.html