使用webpack手动搭建一个基于vue的单页面应用

当咱们面对vue-cli 复杂的代码，当咱们看到各类配置文件的时候，你是否会为此感到头疼，是否会以为心累？今天，你们能够跟着我一块儿，本身来是用webpack 构建一个基于vue单页面的应用，废话很少，当即开始：

1.建立项目

npm init

2.建立项目须要的基础文件和文件夹

3.安装webpack以及一些其余的依赖包

4.配置webpack-base-config.js

5.在 package.json 里面添加 打包命令，添加 --config 指向 webpack.base.config.js

--在命令面板中输入 npm run build
--会在项目中生成一个 dist文件夹

--已经生成好打包文件，可是只有js，没有html，

6.引入 html-webpack-plugin 插件，让webpack把html也打包进去

再次执行 npm run build 从新生成dist文件夹

html 和 js 都有了，在浏览器中打开html

7.在webpack.dev.config.js 中配置 dev-server 构建本地node服务器，添加热部署功能

8.package.json 中,添加 babel-loader babel-core babel-preset-env 依赖包，支持 es6,添加 server 指令

9.配置 loader ，添加css, js, vue loader，注意，loader加载有前后顺序，后加载的放开头，要先了解每一个loader之间的依赖关系

10.在你的index上添加内容 ，在终端输入 npm run server 浏览器自动打开页面，

-- 修改main.js

--便可看到 浏览器上的内容

---

至此，单页面应用已经构建好了，接下来咱们引入vue相关

11.在 src文件夹下新建 App.vue

----修改 main.js

---- 查看浏览器报错了，

识别不了vue？？ 不是引用了vue-loader嘛

-- 别急，缘由是 webpack没有识别vue模版， 在package.json 中install vue依赖相关的package

最后，在webpack.dev.config.js 添加 vueloaderplugin 插件

重启服务，完事了

贴上git 地址， https://github.com/caojide/we...转载请注明出处