搭建webpack项目

搭建项目使用到的基本命令

第一步：初始化项目
npm init -y

第二步：安装需要的webpack,webpack-cli
npm install webpack webpack-cli -D

第三步：安装vue
npm install vue

第四步：安装webpack打包使用的vue的插件
npm install vue-loader vue-template-compiler -D

第五步：安装完上述包后，webpack.config.js中配置如下
主要有
①引入const VueLoaderPlugin=require(‘vue-loader/lib/plugin’)
②new VueLoaderPlugin()
③rule里面写规则

const path=require('path')//绝对路径,__dirname代表当前的项目路径下
const VueLoaderPlugin=require('vue-loader/lib/plugin')

module.exports = {
	entry:'./src/main.js',
	output:{
		filename:'main.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[{
			test:/\.vue$/,
			loader:'vue-loader'
		}]
	},
	plugins:[
		new VueLoaderPlugin()
	]
}

第六步：上述vue-loader vue-template-compiler依赖下面css-loader
npm install css-loader -D

第七步：在package.json加入下面的红色句子，使默认的npx webpack 打包命令改为npm run build

最后
npm run build --打包成功

注意运行index.html（引入了打包后的js）报如下报错

上述错误解决：在主要文件index.html中
引入vue相关的js–需要设置如下配置，原因：引入可用的vue打包js文件，导入配置主要代码：

resolve:{
	alias:{
		'vue':'vue/dist/vue.js'
	}
}

配置的全部代码

const path=require('path')//绝对路径,__dirname代表当前的项目路径下
const VueLoaderPlugin=require('vue-loader/lib/plugin')


module.exports = {
	mode:'development',
	entry:'./src/main.js',
	output:{
		filename:'main.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[{
			test:/\.vue$/,
			loader:'vue-loader'
		}]
	},
	plugins:[
		new VueLoaderPlugin()
	],
	resolve:{
		alias:{
			'vue':'vue/dist/vue.js'
		}
	}
}

最后,重新打包运行
npm run build --打包成功