Vue.js学习No.5(WebPack配置二)

• 欢迎关注我的公众号
  

• 学习的内容如下

• 开始

• 当我们需要频繁的修改main.js

• 我们每次都需要去构建，这样显得很麻烦，webpack .\src\main.js -o .\dist\bundle.js，通过配置文件去配置每次的打包入口和出口
• 1、创建webpack.config.js
  

• 2、输入webpack 就可以直接打包
  

• 3、生成相对应的文件
  

• 当我们在控制台直接输入webpack命令执行的时候，webpack做了几个步骤

• 1、没有使用webpack 指定入口和出口
• 2、webpack 就会去项目中的根目录中，找一个webpack.config.js的配置文件
• 3、当找到了这个配置文件后，webpack就回去执行这个配置文件，解析执行完配置文件后，就得到了配置文件，导出配置对象

• 4、当webpack拿到配置对象了，就拿到了配置文件中入口和出口，然后进行打包和构建

• 使用webpack-dev-server工具实现自动的打包编译的功能

• 1、运行npm i webpack -dev -server -D安装工具
  

• 2、用法和webpack一样

• 3、由于在本地安装的，所以无法使用脚本命令，只能安装到全局-g才能正常的使用
  

• 4、脚本命令
  在pcakage.json中添加"dev": "webpack-dev-server"
  

• 5、然后就可以在终端输入命令npm run dev

h:\20190305\code\webpack>npm run dev

> yes@1.0.0 dev h:\20190305\code\webpack
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: Hash: 8b5966bb4652f34f42c7
Version: webpack 4.30.0

• 6、打开本地浏览器 http://localhost:8080/，然后就可以看到,说明打包成功了

• 7、注意点，当我们改变main.js中的内容，并且保存的时候，我们就可以自动的打包

• 8、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中
  
  打开根路径的bundle，打包成的服务器的地址，项目中找不到，但是可以自动打包

  <!-- webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中 -->
    <script src="/bundle.js"></script>

• 9、可以认为这个webpack-dev-server工具，以一种虚拟的形式托管到了项目的根目录中，虽然看不到，但是可以认为和dist 平级的文件，为啥是这样做呢，原因就是快。速度快

• webpack-dev-server工具常用的参数一
• 配置端口号和自动打开浏览器：”dev”: “webpack-dev-server –open –port 3000”

• --contentBase src 可以自动的打开 index.html的文件，而不用去重新选择 src
  

• --hot 可以实现浏览器无刷新的重载，修改完样式，页面根本没有刷新，但是能够重新加载最新的代码
  ·"dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"

• 完整的结果
  

• webpack-dev-server工具常用的参数二

• 这样配置和上面的效果一样
  
  
• 最终的效果图