Vue-自己构建vue脚手架

最新推荐文章于 2024-02-22 12:33:59 发布

小矮马

最新推荐文章于 2024-02-22 12:33:59 发布

阅读量810

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_40007317/article/details/105524465

版权

首先创建一个test文件，在test文件中在创建一个src文件，里面包括App.vue、index.html和index.js三个文件，项目结构如下

index.html代码：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title></title>
    </head>
    <body>
	<div id="app"></div>
    </body>
</html>

index.js代码：

import Vue from 'vue' 
import MyCom from './App.vue'

new Vue({
	render(h) {return h(MyCom)}
}).$mount('#app')

App.vue代码：

<template>
  <div id="app">
	1111
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

接着在test文件下创建webpack.config.js文件，按照下面步骤进行webpack打包和构建vue脚手架：

webpack.config.js代码：

/*
	一、webpack打包配置文件
		首先创建webpack.config.js文件,然后执行下面步骤:
		0.若未全局安装webpack,则先执行cnpm install webpack webpack-cli -g,安装过则跳过此步骤
		1.npm init -y
		2.在创建的package.json的scripts中加入如下代码:
			"dev": "npm run serve",
			"serve": "webpack-dev-server --open",
			"build": "webpack"
		3.npm i style-loader --save-dev
		4.npm i css-loader --save-dev
		5.npm i mini-css-extract-plugin --save-dev
		6.npm i html-webpack-plugin --save-dev
		7.npm install --save-dev file-loader
		8.cnpm install clean-webpack-plugin --save-dev
		9.cnpm install --save-dev webpack-dev-server
		10.cnpm install webpack webpack-cli --save-dev 或者 npm link webpack --save-dev
		11.删除node_modules包
		
	二、自己构建vue脚手架:
		将上面生成的package.json,package-lock.json,webpack.config.js三个文件引入,执行下面步骤
		12.npm i
		13.npm i vue --save
		14.npm install -D vue-loader vue-template-compiler
		15.npm run dev
		
	三、以后创建vue项目就可以直接将package.json,package-lock.json,webpack.config.js三个文件引入,
		执行npm i,npm run dev就可以生成vue项目了
*/

const {CleanWebpackPlugin} = require('clean-webpack-plugin');	//清理dist的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');				
const webpack = require('webpack');		// 用于访问内置插件
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');	//引入vue加载器
module.exports = {
	entry: './src/index.js',	//项目入口
	output: {
		path: __dirname + '/dist',		//出口文件夹
		filename:"[name][hash:6].js"	//出口文件名
	},
	module:{	//加载器loader
		rules:[
			//1.以<style>标签的形式引入在html 页内,'style-loader'
			// {test: /\.css$/, use: ['style-loader', 'css-loader']},
			//2.以<link>标签href 属性的形式实现外联引入,需要在plugins中配置HtmlWebpackPlugin
			{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader']},
			//3.图片资源 输出挂载到HTML模板  
			{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
			{test: /\.vue$/,loader: 'vue-loader'}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({		//输出配置插件
			template: './src/index.html',	//打包的时候 挂载资源到指定模板
			hash: true, //为所有包含的脚本和CSS文件附加唯一的编译哈希，这对缓存清除很有用
			filename: 'index.html', //打包后生成的文件名  放在output.path里面
			template: './src/index.html', //来自哪里 模板文件
			inject: 'body', //引入js的位置:引入js的位置:  'head'-头部引入 'body'/true--</body>之前引入 false不引入
			minify: { //压缩项配置
				removeComments: true, //是否清除HTML注释  
				collapseWhitespace: true, //是否压缩HTML  
				removeScriptTypeAttributes: true, //是否删除<script>的type="text/javascript"  
				removeStyleLinkTypeAttributes: true, //是否删除<style>和<link>的type="text/css"  
				minifyJS: true, //是否压缩页内JS  
				minifyCSS: true //是否压缩页内CSS  
			}
		}),
		//以<link>形式时打包的输出路径,它会把src/index.js中导入的css文件都挂载到dist文件的17869e.css中
		new MiniCssExtractPlugin({filename:'./[hash:6].css'}),
		new CleanWebpackPlugin(),	//用来清理每次重新打包的时候的dist文件夹中多余的东西
		new webpack.HotModuleReplacementPlugin(),	//热更新服务
		new VueLoaderPlugin()	//vue加载器
	],
	mode: 'development',	//以什么模式打包 'development'和'production'
	devServer: {	//热更新
		contentBase: './dist',	//相当于帮我们搭建了一个服务器 这个代表静态托管的目录
		// host: 'localhost',
		// compress: true,
		// // inline: true,
		// port: 8080,
		// open: true,
		// hot: true
	},
}

webpack配置文件已经上传，下载地址https://download.csdn.net/download/qq_40007317/12327806