js webpack 配置路径_Vue.js学习No.5(WebPack配置二)

• 学习的内容如下
• 开始
• 当我们需要频繁的修改main.js
• 我们每次都需要去构建，这样显得很麻烦，webpack .srcmain.js -o .distbundle.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:20190305codewebpack>npm run dev> yes@1.0.0 dev h:20190305codewebpack> webpack-dev-serveri ｢wds｣: Project is running at http://localhost:8080/i ｢wds｣: webpack output is served from /i ｢wdm｣: Hash: 8b5966bb4652f34f42c7Version: webpack 4.30.0

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

• 7、注意点，当我们改变main.js中的内容，并且保存的时候，我们就可以自动的打包
• 8、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中

• 打开根路径的bundle，打包成的服务器的地址，项目中找不到，但是可以自动打包

• 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工具常用的参数二
• 这样配置和上面的效果一样

• 最终的效果图