手动搭建 vue 开发环境 #1
Description
手动搭建 vue 开发环境 - 基础
技术栈： webpack4、babel7、vue2
- es6/7/8 转 es5
- es6/7/8 api 转 es5
- 处理 css
- 处理 font
- 处理 image
- 处理 vue
- 创建 html
- 热更新
es6/7/8 转 es5
- 依赖安装
npm install babel-loader @babel/core @babel/preset-env -D- 修改 webpack 配置
module: {
// 其它选项...
rules: [
// 其它选项...
{
test: /\.js$/,
include: /src/,
use: {
loader: 'babel-loader'
}
}
]
}- 修改 package.json 配置
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}
]
]
}es6/7/8 api 转 es5
- 依赖安装
npm install core-js@2 @babel/runtime-corejs2 -S- 修改 babel.config.js 配置, 按需引入 polyfill.
module.exports = function(api) {
api.cache(true)
return {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 2,
targets: {
browsers: ['> 1%', 'last 2 versions']
}
}
]
]
}
}处理 css
- 依赖安装
npm install -D style-loader css-loader- 修改 webpack 配置
module: {
rules: [
// 其它选项...
{
test: /\.css$/,
include: [/src/],
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
}
]
}处理 font
- 依赖安装
npm install -D url-loader- 修改 webpack 配置
module: {
rules: [
// 其它选项...
{
test: /\.(eot|woff2?|ttf|svg)(\?.*)?$/,
include: [/src/],
use: 'url-loader'
}
]
}处理 image
- 修改 webpack 配置
module: {
rules: [
// 其它选项...
{
test: /\.(jpe?g|png?|webp|gif)(\?.*)?$/,
include: [/src/],
use: 'url-loader',
options: {
limit: 8192 //小于8KB以base64嵌入
}
}
]
}处理 vue
- 依赖安装
npm install -D vue-loader vue-template-compiler- 修改 webpack 配置
const VueLoaderPlugin = require('vue-loader/lib/plugin.js')
module: {
rules: [
// 其它选项...
{
test: /\.vue$/,
include: [/src/],
use: 'vue-loader'
}
]
}
plugins: [
// 其它选项...
new VueLoaderPlugin()
]创建 html
- 创建 html 模板文件，保存路径 src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>m-admin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>- 依赖安装
npm install -D html-webpack-plugin- 修改 webpack 配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 其它选项...
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html')
})
]热更新
- 依赖安装
npm install -D webpack-dev-server- 修改 webpack 配置
const webpack = require('webpack')
plugins: [
// 其它选项...
new webpack.HotModuleReplacementPlugin()
]- 修改 package 配置
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.config.js"
}