上节: 编写一个plugin
本节开始用之前介绍的知识来搭建个vue开发环境,其实如果把基础篇的那些内容掌握,配合文档,完全可以自己搭建出来。
开始
新建一个空文件夹,并在文件夹下新建如下基本文件:
.gitignore:
node_modules
dist
.idea
.vscode
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
package.json:
{
"name": "webpack-train",
"version": "1.0.0",
"description": "webpack4",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": ["webpack4"],
"author": "Madao",
"license": "ISC"
}
然后新建src目录,并在src下新建main.js(入口)和App.vue(根组件):
src/main.js:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#root',
render: h => h(App)
});
src/App.vue:
<template>
<div>
<h1>hello {{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'webpack'
}
}
}
</script>
在根目录下新建webpack.config.js:
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
// 起node服务
devServer: {
port: 4200
},
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
// 用于识别vue文件中的style块
test: /\.less$/,
/*
vue-style-loader基于style-loader
https://www.npmjs.com/package/vue-style-loader
*/
use: ['vue-style-loader', 'css-loader', 'less-loader']
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin()
]
};
新建babel.config.js:
const presets = ["@babel/env"];
module.exports = { presets };
这是基本的开发环境配置,先安装下依赖看能否跑起来:
npm i webpack webpack-cli webpack-dev-server vue-loader vue-style-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader file-loader url-loader html-webpack-plugin less less-loader vue-loader -D
npm i vue
安装完成后npm run dev, 打开浏览器localhost:4200:
ok,开发环境大概的配置就完成了。
开启热更新,安装vue-router和vuex
热更新:修改webpack.config.js:
// 省略
const webpack = require('webpack');
devServer: {
port: 4200,
hot: true
},
// 省略
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
// 省略
安装vue-router和vuex:
npm i vue-router vuex
修改src/main.js:
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(Vuex)
new Vue({
el: '#root',
render: h => h(App)
});
然后重新npm run dev即可。
区分配置
现在把开发配置和生产配置区分开,首先在根目录下新建build目录,并将webpack.config.js复制三份到build中,然后分别重命名:
修改build/webpack.dev.js:
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const {resolve} = require('path');
module.exports = {
mode: 'development',
entry: resolve(__dirname, '../src/main.js'),
// 起node服务
devServer: {
port: 4200,
hot: true
},
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
// 用于识别vue文件中的style块
test: /\.(css|less)$/,
/*
vue-style-loader基于style-loader
https://www.npmjs.com/package/vue-style-loader
*/
use: ['vue-style-loader', 'css-loader', 'less-loader']
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: resolve(__dirname, '../index.html')
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
修改package.json里的scripts属性:
"scripts": {
"dev": "webpack-dev-server --config build/webpack.dev.js"
},
然后npm run dev查看服务是否正常启动。
下节完善生产环境的配置,再抽出公共配置即可
下节:手动配置vue-cli下
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。