Vue+webpack项目基础配置教程

最近在学习webpack，跟着课程一个单页面应用，在这里记录一下。这个部分主要讲了如何配置webpack的环境，以及webpack dev的配置。

记录比较粗略，后续会更新。

1.开发环境：vscode,node.js,vue.js,webpack

大家自己安装一下node.js可以参考菜鸟教程

使用的IDE是 VScode

2.项目初始化

快捷键ctrl+` 打开vscode控制台

vscode界面

2.1安装webpack vue vue-loader

npm init
npm i webpack vue vue-loader

npm 出现warn提醒你需要依赖，按照提示进行安装

warn

安装相应的loader

npm i css-loader vue-template-compiler

2.2配置webpack可以加载app.vue文件

首先创建src文件夹，并在其下创建app.vue最为主代码文件，index.js作为入口文件。

基础文件

app.vue文件内容如下：

<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc'
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

在src同级目录下

创建webpack.config.js文件，配置入口entry，输出output

创建package.json文件和webpack.config.js文件

//webpack.config.js
const path = require('path')
module.exports = {
 entry: path.join(__dirname,'src/index.js'), //调用Index.js作为入口文件
 output: { //打包完的js文件会在bundle.js中，这个文件待会会自动生成的
 filename: 'bundle.js',
 path: path.join(__dirname,'dist') //用来存放bundle.js文件的地址，自己定义
 },
 module: {
 rules: [{
  test: /.vue$/,
  loader: 'vue-loader'
 }] }
}

index.js文件作为入口

//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

配置package.json文件中的scripts命令，添加build