webpack+vue+es6+postcss

本篇文章仿照vue-cli生成的项目结构，自己重新搭建目录，写一个小demo进一步巩固单文件组件的知识，并且学习中间件。
一、要解决的问题
1、如果把webpack.config.js放进build文件夹，而不是裸放在项目根目录，如何让项目找到配置文件？
方案A：中间件
写一个dev-server.js，里面指定配置文件webpack.dev.config.js，并自动打开浏览器。在package.json中设置命令行，npm run server，即可运行项目。
方案B：devServer
在package.json中设置命令行，npm run server，即可运行项目。遇到一个匪夷所思的问题，输出的publicPath字段值不能是其他相对路径或绝对路径，只能是'/'，否则页面就是空白，既不引用内存中的js文件，也不报错！花了半天排查，天哪！
2、前面的基础学习，index.html都是手动引入bundle.js的文件，可不可以在页面加载的时候，自动载入呢？
这涉及html-webpack-plugin插件，下面会讲到。

二、webpack-dev-server和webpack-dev-middleware
前面的学习都用的是webpack-dev-server，本篇文章将放弃使用webpack-dev-server，换用webpack-dev-middleware。他们都是devtools，可以避免每次写到硬盘里，可以从内存读取文件，效率高。到底有什么区别呢？请看下文。
1、webpack-dev-server
它是一个静态资源服务器，只用于开发环境。它是一个小型Express服务器，webpack-dev-server会把编译后的静态文件全部保存在内存里。webpack-dev-server就是Express和webpack-dev-middleware的封装
，只有config和命令行参数可以配置，做定制型的开发比较困难，所以它属于纯前端的辅助工具。
2、webpack-dev-middleware
它是一个处理静态资源的middleware，需要结合webpack-hot-middleware使用，webpack-hot-middleware可以实现浏览器的无刷新更新。webpack-dev-middleware是一个中间件，可以编写自己的后端服务，然后整合进来，可扩展性比较大。
webpack-dev-middleware的作用是生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。配置文件中的publicPath字段可以指定内存中的文件路径。
有两种编译模式，正常模式和lazy模式。正常模式是内容改变后就编译，lazy模式是浏览器请求时编译。

三、涉及的插件
1、express
基于node的web应用开发框架。
2、webpack-dev-middleware
3、webpack-hot-middleware
4、http-proxy-middleware
单线程node.js代理中间件，用于连接，快速和浏览器同步。
5、opn
用于打开网址，文件，可以跨平台。
6、portfinder

7、html-webpack-plugin
它会自动帮你生成一个html文件，并且引用相关的assets文件(如 css, js)。
8、friendly-errors-webpack-plugin
构建项目时，在命令行就能看到运行的错误。

9、axios

返回promise，可以异步获取服务器数据。

巴特西

webpack+vue+es6+postcss

最新文章

热门文章