手写Vue 准备工作

Posted 2020-11-27 guangzhou11

1.安装插件 

  "devDependencies": {
    "html-webpack-plugin": "^4.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

　　

2.配置 项目 的基本结果

 

（1）根目录下新建 src/index.js , public/index.html

  (2) 添加 webpack 配置文件 

let path = require(‘path‘)
let htmlwebpackplugin = require(‘html-webpack-plugin‘)
module.exports = {
  mode: ‘development‘,
  entry: ‘./src/index.js‘,
  output: {
    filename: ‘bundle.js‘,
    path: path.resolve(__dirname, ‘dist‘)
  },
  devtool: ‘source-map‘,  //产生源码映射文件
  plugins: [
    new htmlwebpackplugin({
      template: path.resolve(__dirname, ‘./public/index.html‘)
    })
  ],
  // 更改解析模块的解析方式
  resolve: {
    modules: [path.resolve(__dirname, ‘source‘), path.resolve(‘node_modules‘)]
  }
}

（3) 添加项目启动 打包命令

 "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },

（4） 测试项目启动

在src/index.js  添加测试代码

alert("1")

 （5）测试结果

运行 npm run  start  得到 

 Project is running at http://localhost:8080/

在浏览器 打开     http://localhost:8080/ 得到结果