vue2+webpack4搭建，开发，打包

最新推荐文章于 2024-09-28 07:00:00 发布

原创

最新推荐文章于 2024-09-28 07:00:00 发布 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2 #webpack4

本文详细介绍了如何使用Vue2和Webpack4搭建项目，包括webpack-dev-server的配置与使用，vue2核心知识概览，如数据绑定、生命周期方法等。此外，还讲解了配置vue的jsx语法、postcss以及webpack如何配置css单独打包，最后讨论了webpack区分打包类库代码和hash优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成了package.json文件之后，安装webpack，vue，loader等相关的包：

npm install webpack --save-dev //安装webpack
npm install --save-dev webpack-cli //4以后需要
npm i vue -S
npm i vue-loader vue-template-compiler -D
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm i babel-plugin-transform-vue-jsx
npm install  babel-plugin-syntax-jsx  babel-helper-vue-jsx-merge-props --save-dev
npm install css-loader style-loader --save-dev
npm install --save-dev  postcss-loader autoprefixer postcss
npm install stylus-loader stylus --save-dev
npm install html-webpack-plugin --save-dev
npm install file-loader --save-dev
npm install url-loader --save-dev
npm install --save-dev cross-env//跨平台环境变量

新建一个vue组件：

<template>
	<div id='a'>{
  
  {text}}
		<div>是的归属感热交头接耳家庭人均</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			text:"收到回复"
		}
	},
}
<