vue-loader+webpack项目配置

1.项目准备

安装之前请确保安装了nodejs和npm，在命令行输入node -v查看是否安装node
在vscode终端里面这是npm的镜像仓库，会提高下面下载的速度

# 配置仓库地址
npm config set registry https://registry.npm.taobao.org
# 验证是否成功命令
npm config ls

当验证命令结果如下图，则表示成功了

2.初始化项目

创建空文件夹"webpackVue"，然后用vscode打开，然后打开vscode终端

# 将项目初始化成npm的项目
# -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json
npm init -y

这时候我们看见根目录下多了一个package.json的文件夹

3.安装依赖

由于需要安装的依赖太多了，我就直接在package.json的devDependencies和dependencies里面写入需要安装的依赖了，然后直接npm install
package.json代码如下：

{
   
    "name": "webpackVue",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
   
        "test": "echo \"Error: no test specified\" && exit 1",
        "serve": "webpack-dev-server --config webpack.config.js --port 3000",
        "build": "webpack --progress --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
   
        "vue": "^2.6.12",
        "core-js": "^3.4.0"
    },
    "devDependencies": {
   
        "@babel/core": "^7.7.2",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/preset-env": "^7.7.1",
        "autoprefixer": "^9.7.1",
        "babel-loader": "^8.0.6",
        "babel-plugin-import": "^1.12.2",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "html-webpack-plugin": "^3.2.0",
        "postcss-loader": "^3.0.0",
        "style-loader": "^1.0.0",
        "terser-webpack-plugin": "^2.2.1",
        "url-loader": "^2.2.0",
        "vue-loader": "^15.7.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"
    }
}

然后执行：

npm insta