webpack4.x加vue模板文件简单还原vue-cli

1.首先 npm init -y 创建一个项目

2.安装vue

npm install vue --save

3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack-cli

npm install --save-dev webpack webpack-dev-server webpack-cli

4.安装loader(加载器)

npm install  --save-dev css-loader file-loader style-loader

5.安装vue模板的loader和template解析

npm install vue-loader vue-html-loader vue-style-loader vue-template-compiler

6.安装babel

npm install --save-dev babel-loader@7 babel-core babel-preset-env

推荐用babel-loader@7  7以上的版本依赖可能会报错

babel-preset-env：会根据配置的运行环境自动启用需要的babel插件

7.安装 html-webpack-plugin 不安装可能会出现配置完成后页面一片空白的情况

8.配置json的scripts

9.在根目录创建App.vue  index.html index.js webpack.config.js 目录如下：

webpack.config.js配置如下

App.vue

index.html

index.js

然后npm run dev

npm run build 打包上线 会生成一个dist文件夹 就能直接上线啦