webpack搭建vue2项目
文章目录
- 一、环境安装
- 二、目录结构
- 三、开发与生产环境分离
- 四、最后
一、环境安装
首先你需要node环境
创建一个文件夹
然后cmd运行
npm init -y
最后package.json文件
{
"name": "demo5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack 打包工具
npm i webpack webpack-cli -D
热更新和服务器
npm i webpack-dev-server -D
css加载器
npm i css-loader -D
html插件
npm i html-webpack-plugin -D
接下来就是vue2环境
npm i vue@2
vue加载器以及vue的模板编译，vue-template-compiler版本需要和vue的版本一致，你下载的vue版本在package可以查看。vue-loader的版本不能太高，不然没法运行
npm i [email protected] [email protected] -D
二、目录结构
在本目录创建相应的目录结构
|- src
|--- public
|----- index.html
|--- main.js
|--- App.vue
|--- webpack.config.js
src/public/index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">div>
body>
html>
src/main.js
import Vue from 'vue'
import App from "./App.vue";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
src/App.vue
<template>
<div class="app">{{ msg }}div>
template>
<script>
export default {
name: "App",
data() {
return {
msg: "hello vue2",
};
},
};
script>
<style scoped>
.app {
color: aqua;
}
style>
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
const path = require("path");
module.exports = {
mode: "development", // 开发模式
entry: path.resolve(__dirname,"./src/main.js"),
module: {
rules: [
// 解析导入的css文件
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
exclude: /node_modules/,
},
// 解析vue文件
{
test: /\.vue$/,
loader: "vue-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/public/index.html"), //模板文件
}),
new VueLoaderPlugin(),
],
devServer: {
host: "localhost",
port: 8888,
open: true, // 自动打开一个浏览器窗口
hot: false, // 不适用热重启，似乎会和vue-loader冲突
},
};
最后是package.json文件
{
...
"scripts": {
"start": "webpack serve --progress --mode=development"
},
....
}
cmd运行
npm run start
此时就能实时开发vue2程序了。
三、开发与生产环境分离
如果你想上线，那么需要更改webpack.config.js文件，于是我们分出两套配置文件，一套开发环境的webpack配置文件，另一套生产环境的，也就是直接build出源代码，我们从中抽离出共有的配置再写入一个文件
于是我们需要三个文件
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
这三个文件放在根目录的build文件夹中。
还需要webpack-merge工具来对配置文件进行合并
npm i webpack-merge -D
./build/webpack.common.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname,"../src/main.js"), // 注意，此时的src目录在 ../ 路径是按配置文件来算
module: {
rules: [
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
exclude: /node_modules/,
},
// 解析vue文件
{
test: /\.vue$/,
loader: "vue-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../src/public/index.html"), //注意，此时的src目录在 ../
}),
new VueLoaderPlugin(),
],
};
开发环境配置文件
./build/webpack.dev.js
const { merge } = require("webpack-merge");
const config = require("./webpack.common.js");
const devConfig = {
mode: "development", // 开发环境
devServer: {
host: "localhost",
port: 8888,
open: true, // 自动打开一个浏览器窗口
hot: false, // 不适用热重启，似乎会和vue-loader冲突
},
};
module.exports = merge(config,devConfig);
生产环境
./build/webpack.prod.js
const config = require("./webpack.common.js")
const {merge} = require("webpack-merge")
const prodConfig ={
mode: "production",
}
module.exports = merge(prodConfig, config)
package.json
{
....
"scripts": {
"dev": "webpack serve --config ./build/webpack.dev.js --progress --mode=development",
"build": "webpack --config ./build/webpack.prod.js --progress --mode=production"
},
...
}
cmd执行 npm run serve 进入开发模式，可以变写代码边实时观察网页变化。
npm run build 编译源代码，然后在dist文件夹直接双击index.html就能看到你编写的网页了，此时可以将该项目部署上线了。
四、最后
完成后就可以开发vue2程序了。这只是最简单的一个示例
其中还可以加入更多功能，如css压缩，css分离，babel兼容处理等。
其实这就是一个学习webpack的过程，使用官方的cli肯定更方便的。
后面会出如何使用vue进行多页面开发，众所周知，vue主要就是单页面开发，但是有时候我们就是需要多个页面来互相访问资源。