webpack for vue的基本配置

# 在webpack环境中安装引入vue

npm install vue@2.6.1 --save

Runtime-only -> 不允许有template
Runtime-complie -> 允许有template

Q1: el属性和template属性的关系？

// 运行 .vue文件
npm install --save-dev vue-loader vue-template-compiler

1
2

注意：要保证版本号的问题

# 搭建本地服务器

// npm 安装loader
npm install webpack-dev-server@2.9.3 --save-dev

// 在webpack.config.js 中配置
devServer: {
		contentBase: './dist',// 为哪个文件提供服务的
		inline: true, // 是否实时监听
		port: '8080', //端口号 ， 默认为8080
		HistoryApiFallback:    // 在H5页面依赖history模式
	}

// package.json中的配置
"dev": "webpack-dev-server"
"dev": "webpack-dev-server --open" // 自动打开

1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后完成开发，打包npm run build 部署在服务器

配置文件的分离 ???

创建文件夹 build/
创建文件

base.config.js 开发时/编译时

prod.config.js 编译时

dev.config.js 开发时

//合并
// npm 安装合并loader
npm install webpack-merge@4.1.5 --save-dev
// 删除webpack.config.js

"build": "webpack",
"dev": "webpack-dev-server"

//变为
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

1
2
3
4
5
6
7
8
9
10
11

编辑

← webpack-plugins webpack-babel→