基于webpack4.39.2手动搭建vue的开发环境

最新推荐文章于 2021-12-22 11:35:09 发布

ms_Fee

最新推荐文章于 2021-12-22 11:35:09 发布

阅读量191

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_40121685/article/details/100151711

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、初始化一个空的文件夹

mkdir vueProject
cd vueProject
npm init

一路回车即可。

随后可以看到在vueProject文件夹下面多了一个package.json文件

打开这个文件，内容如下：

2、安装基本的npm包

首先要安装 vue 和 webpack。因为 webpack 4.x已经把 cli 单独拎出来了，所以还要安装 webpack-cli；因为 webpack 本身其实直接能处理的只有 js 资源，是通过各种 loader 让其他资源可以被 webpack 打包处理的。而在vue中要用 vue 写单文件组件，所以就还要安装 vue-loader。

npm install --save-dev vue vue-loader
npm install --save-dev webpack webpack-cli

3、在根目录下添加webpack.config.js文件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	entry: path.join(__dirname,'src/main.js'), // 项目总入口文件
	// 输出文件
	output: {
		path: path.join(__dirname,'dist'), // 所有的文件都输出到dist/目录下
		filename: 'bundle.js'
	},
	module: {
		rules:[
		{
			// 使用vue-loader解析.vue文件
			test: /\.vue$/,
			loader:'vue-loader'
		},{
			test:/\.css$/,
			// 要加上style-loader才能正确解析.vue文件里<style>标签内容
			use:['style-loader','css-loader'] // 顺序一定不能错
		}
	  ]
	},
	plugins:[
		new VueLoaderPlugin() // 最新版的vue-loader需要配置插件
	]
};

4、添加相应文件

在根目录下添加index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vueProject</title>
  </head>
  <body>
    <div id="app">

    </div>
  </body>
</html>

在根目录下添加src文件夹，在src文件夹下添加main.js、App.vue文件

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  render:(h)=>h(App) // 这里一定要写成render
})

App.vue

<template>
  <div class="app">
        webpack搭建vue开发环境
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
.app{
  font-size: 30px;
}
</style>

5、因为在webpack中使用到了css-loader、style-loader等包,以及项目运行需要vue-template-compiler,所以需要再安装一下这些包

npm install --save-dev css-loader style-loader vue-template-compiler

6、在package.json文件中的scripts字段下添加build

   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "build": "webpack --config webpack.config.js"
  },

7、运行npm run build 命令：如果出现如下，则说明项目打包成功

此时项目目录结构如下:

8、安装webpack-dev-server包,html-webpack-plugin插件

npm install webpack-dev-server html-webpack-plugin --save-dev

至此项目所需的基础依赖安装完毕，package.json文件中

9、修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
+   "start": "webpack-dev-server --inline --progress --config ./webpack.config.js",
+   "dev": "webpack --watch"
  },

10、修改webpack.config.js文件

    const path = require('path');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
+   const HtmlWepackPlugin = require('html-webpack-plugin');


    


	plugins:[
		new VueLoaderPlugin(), // 最新版的vue-loader需要配置插件
+		new HtmlWepackPlugin({
+			titile:'开发',
+			filename:'index.html',
+			template: './index.html',
+		})
	]

11、npm start 运行项目，打开浏览器8080端口 localhost:8080

成功打通任督二脉！

ms_Fee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于webpack4.39.2手动搭建vue的开发环境

1、初始化一个空的文件夹mkdir vueProjectcd vueProjectnpm init一路回车即可。随后可以看到在vueProject文件夹下面多了一个package.json文件打开这个文件，内容如下：2、安装基本的npm包首先要安装 vue 和 webpack。因为 webpack 4.x已经把 cli 单独拎出来了，所以还要安装 webpack-...
复制链接

扫一扫

专栏目录