结构&目录

根目录

创建一个项目的根目录 Webpack_Vue

package.json

使用命令npm init -y 来生成package.json的文件

{
  "name": "Webpack_Vue",
  "version": "1.0.0",
  "description": "webpack + vue 构建项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Azr",
  "license": "ISC"
}

src/main.js

创建入口文件src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:"#app",
    render:h => h(App)
})

src/App.vue

添加根组件src/App.vue

<template>
  <div>
    Hello Vue.
  </div>
</template>

webpack.config.dev.js

创建webpack的配置文件webpack.config.dev.js

module.exports = {
  //  开发模式
  mode: "development",
  //  入口文件
  entry: "./src/main.js",
  // 出口文件
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    // 配置loader
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      }
    ]
  },
};

template.html

创建template.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>Webpack-Vue</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

最终结构

webpack_vue
			|--src 项目的源代码目录
				|--main.js 项目的入口文件
				|--App.vue 根组件
			|--package.json 项目配置文件
				npm init -y
			|--webpack.config.dev.js 项目开发阶段的配置文件
			|--template.html

PreviousCDN加速 Next基本配置

Last updated 7 years ago