初学入门：webpack结合vue-cli2-实现自定义规则编译+打包

最新推荐文章于 2023-07-12 17:32:25 发布

w203_666

最新推荐文章于 2023-07-12 17:32:25 发布

阅读量1.1k

点赞数 2

分类专栏：开发文章标签： webpack vue.js 前端 npm 前端框架

本文链接：https://blog.csdn.net/w203_666/article/details/128517818

版权

开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先简单介绍一下webpack和vue-cli：

webpack ：是一个用于现代 JavaScript 应用程序的静态模块打包工具，相当于我们写的module，经过webpack（处理过程中叫 chunk）处理后生成一个或多个bundle，而bundel文件经过加载和编译最终可直接在浏览器中运行。

vue-cli：俗称：vue 脚手架，是 vue 官方提供的、快速生成 vue 工程化项目的工具。我这里用的是vue2，如果是新项目真的建议直接用vue-cli开发，快速准确规范，当然如果是学习用script引入那也没有问题。

记得之前有个面试官问我怎么搭建vue项目，我说vue-cli，他就说那不就是二次开发了吗，怎么就不会自己重头到尾自己搭建？em...然后问webpack用过吗，这就尴尬了，我说用vue-cli自带的，好吧，然后就被嘲讽了，所以行吧，还是好好学习学习webpack吧！

本篇记录了2种打包方法以及打包时遇到的坑，第一种 vue-cli 自带的 webpack 默认直接打包，第二种自己自定义配置 webpack 打包自己想要的结构。

首先，项目基于 vue2，使用 vue-cli 创建生成，本次举例就是直接在 HBuilder X 下新建的一个简单普通 vue 项目，结构如下所示：

按vue-cli直接打包的方法，npm run build 打包后得到的目录结构是：

这一步还不行，直接访问html还是全空白的情况，会有如下所示报错：

需要在项目根目录下新建文件 vue.config.js，输入以下代码：

删掉dist重新执行 npm run build ，然后打开 dist目录下的 index.html，页面才显示正常，如下所示：

上面为止，我们打包 vue-cli 项目，都是直接根目录下输入命令 “npm run build” ，然后就生成了一个 dist 目录，这就是之前打包项目的做法，虽然偷懒但也好使，但是在后面我们开始应对各种更复杂的打包情况时，比如压缩图片转base64，使用 scss/less 语法或者编写一些比较高级的ES6+语法，分目录存放不同的模块文件时等等，vue-cli自带的编译和打包就不太够用了。

下面我们就开始自己学习根据webpack的配置进行编译和打包，首先我们刚开始创建的vue-cli项目的package.json长这样，可以看到很简单，编译和打包命令用的都是原先自己配置好的webpack，

现在我们需要新建一个build文件夹来分别存放主要的、编译的和打包的命令规则配置，如下所示在build文件夹下新建webpack.dev.js、webpack.prod.js和公共的webpack.common.js文件，webpack.common.js就是把编译和打包共有的配置提出来的文件，这里举例就简单点，就写了个出口文件，后面还会举例一些特别内容的打包规则，

（可能有小伙伴问了，为什么不用一个webpack.config.js就行了，这里我不太推荐开发和打包的一起配置规则存放，因为分开存放开发环境和生产环境以及一些公共的配置抽离出来，可以适配更多的项目环境及打包情况，方便维护，也可以更加简洁清晰）

写编译和打包配置之前，我们还需要先引入以下几个插件：

1. webpack的开发服务器器：

npm webpack-dev-server （这是默认最新版本，但不太推荐，建议按版本下载兼容会比较好）

安装命令：npm install webpack-cli@3.3.12 -D

2. webpack-merge（合并规则）：

安装命令：npm install webpack-merge -D

3. html-webpack-plugin（设置预览页）：

不设置的话一打开就是一堆文件夹和文件，所以这还是有必要的，

安装命令：npm install html-webpack-plugin@3.2.0 -D

这里如果遇到安装失败报错等，不要慌，把原来根目录下自带的node_modules目录删了，然后重新npm install下载依赖，下载完再重新执行安装命令就行

以上安装引入完成后，package.json里显示了对应插件的版本信息则表示安装成功了，然后再在scripts下加命令dev，--open表示编译后直接打开浏览器，--config则是指向编译访问的文件，如下所示，

webpack.dev.js内容如下，大概就是一个没什么规则的，就编译以后打开一个预览页的配置，

const path = require("path");
const root = path.resolve(__dirname, '..') // 项目的根目录绝对路径

//导入包
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//把webpack.common的引入,合并规则
const {
	merge
} = require('webpack-merge');
const webpackCommonConf = require('./webpack.common');

module.exports = merge(webpackCommonConf, {
	mode: "development", //可以设置为development(开发模式)，production(发布模式)
	entry: {
		bundle: path.resolve(root, './src/main.js'), // 入口文件路径
	},
	output: {
		path: path.join(root, 'dist'), // 出口目录
		filename: 'js/devIndex.js' // 出口文件名
	},
	devServer: {
		port: 3002, // 指定开发服务器的端口号
		progress: true, // 显示开启本地服务器的进度
		contentBase: '../dist', // 指定本地服务器默认打开的目录
		compress: true // 是否对代码进行压缩
	},
	// 添加plugins信息，添加预览展示页
	plugins: [
		// new webpack.HotModuleReplacementPlugin(),//热更新的以后用到再说
		new HtmlWebpackPlugin({
			//设置生成预览页面的模板文件,（需要展示的首页），
            //vue-cli生成好后public下就有一个index.html模板文件，直接先用，
            //对了，把模板里没定义的变量啥的去掉，比如什么BASE_URL之类的，不然后面报错
			template: "./public/index.html",
			//设置生成的预览页面名称
			filename: "index.html"
		}),
		new VueLoaderPlugin()
	],


});

function resolve(dir) {
	return path.join(__dirname, '.', dir)
}

到了这步，现在不急着继续写webpack.prod.js的先，我们就先编译一下，根目录输入命令 npm run dev 看下结果，

果不其然报错了，因为别忘了，webpack只能处理js/json文件，若要想让它处理其他文件的转化依赖等则需要引入配置对应的loader，而这里明显提示vue文件，那我们就在webpack.common.js文件里继续加配置规则，如下所示，

// 引入node中的path模块处理绝对路径
const path = require('path');

module.exports = {
	//入口文件，我这里举例暂时没有，后面用到会再说
	entry: {},
	//出口文件,告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
	//即使可以存在多个入口起点，但只指定一个输出配置。
	output: {
		path: path.join(__dirname, "..", "dist")
	},
    //加入规则
	module: {
		rules: [{
			test: /\.vue$/,
			use: ['vue-loader']
		}],
	}
}

好了加完之后我们继续执行npm run dev ，发现依旧报错，如下所示，这次也是很明显了，就是css文件没处理得了，

那我们继续在webpack.common.js里加入如下配置，（后面还会有个图片文件报错的，所以图片的规则我也一起加上了），然后下载安装css-loader，我这里下载的版本是4.3.0，可以和我后续的scss-loader/style-loader搭配，

安装命令：npm install css-loader@4.3.0 -D

// 引入node中的path模块处理绝对路径
const path = require('path');

module.exports = {
	//入口文件，我这里举例暂时没有，后面用到会再说
	entry: {},
	//出口文件,告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
	//即使可以存在多个入口起点，但只指定一个输出配置。
	output: {
		path: path.join(__dirname, "..", "dist")
	},
    //加入规则
	module: {
		rules: [{
			test: /\.vue$/,
			use: ['vue-loader']
		}, {
			test: /\.css/,
			use: ['vue-style-loader', 'css-loader']
		}, {
			test: /\.(png|jpg|jpeg|gif|svg|swf)(\?.*)?$/,
			use: [{
				loader: 'url-loader',
				// options: {
				// 图片大小小于12kb，就会base64处理
				// 通常我们只会对8-12kb以下的图片进行base64处理
				// 优点：减少请求数量（减轻服务器压力）
				// 缺点：图片体积会更大（文件请求速度更慢）
				//     publicPath:'/fz/fz/',
				// limit: 12 * 1024,
				//     name: 'assets/img/[name].[ext]'
				// }
			}]
		}],
	}
}

安装完并写完如上配置后，再次执行编译，浏览器自动打开localhost:3002，并且在右边也能看到自己设置的出口文件名，到此，编译成功！

随便输入一段文字并保存编译没问题可实时在页面查看，但后面如果要写scss、less等语言则需要像前面说的继续添加style-loader/scss-loader等依赖包并加入配置规则才可继续编译了！

以下附上一些相关的查找webpack配置，以及一些查找style-loader版本对应的链接：

1. webpack配置官网说明：

配置

2. 根据自己的webpack版本下载对应的loader版本以及看loader版本之间是否互相兼容的链接：

Search · style-loader · GitHub

好了，本篇到此结束，webpack我也是初学，有什么不对的地方希望广大码友们尽情指正，感激不尽，后面如果还有补充我再在下一篇加上！

w203_666

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
初学入门：webpack结合vue-cli2-实现自定义规则编译+打包

本篇记录了2种打包方法以及打包时遇到的坑，第一种 vue-cli 自带的 webpack 默认直接打包，第二种自己自定义配置 webpack 打包自己想要的结构。首先，项目基于 vue2，使用 vue-cli 创建生成，本次举例就是直接在 HBuilder X 下新建的一个简单普通 vue 项目，来实现基本的编译和打包。
复制链接

扫一扫