在慕课上学习了webpack的课程,做了一些笔记,算分享也算记录吧。教程里的是webpack1和现在的webpack4有很多区别,自己也走了不少的坑,最好使用的时候去看官方文档。
https://webpack.js.org/
在填坑的时候也借鉴了很多人写的文章。所以有很多部分是融合了超级多前人的经验总结,然后自己结合实际进行操作的做笔记。部分地方可能有重复,看得懂就好了。
1.全局安装webpack
npm install -g webpack
2.创建项目文件
初始化项目文件目录 npm init
到项目文件下安装webpack npm install webpack
3.安装全局的webpack-cli
npm install -g webpack-cli //获取当前webpack版本号配置文件
4.配置mode
默认有production和development两种模式可以设置
命令行设置 webpack --mode development
5.新建入口
在项目文件目录下新建src文件夹,新建index.js文件入口
6.文件打包
命令行输入 webpack --mode development 或 webpack --mode production
webpack将会默认打包,将./src/index.js文件打包成./dist/main.js文件(自动生成dist文件夹和main.js文件)
7.建立html文件
在项目目录下建立html文件,可以直接引用dist/main.js文件。
注意,我们的 script 引用的文件是 dist/main.js,而不是 index.js。这正是前端开发领域的一个趋势:开发的源文件(例子中的 index.js)与最终部署的文件(例子中的 dist/main.js)是区分开的,之所以这样,是因为开发环境与用户的使用环境并不一致。比如我们可以在开发环境使用 ES2017 甚至 ES2018 的特性,而用户的浏览器不见得支持 - 这也是 webpack 等打包工具的一个意义,它们能够辅助我们构建出在目标用户浏览器上正常运行的代码。
8.其他参数配置
我们如果需要配置webpack指令的其他参数,只需要在webpack –mode production/development后加上其他参数即可,如:
webpack --mode development --watch --progress --display-modules --colors --display-reasons
实时刷新
9.监控文件
watch选项最为直观,但在默认情况下,watch选项是关闭状态。
启用watch选项 webpack --mode development --watch
10.刷新浏览器(看官方文档容易填坑)
https://github.com/webpack/webpack-dev-server
https://webpack.js.org/configuration/dev-server/#devserver
webpack-dev-server,一个基于expressjs的开发服务器,提供实时刷新浏览器页面的功能。
webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步到页面上:
①全局安装:npm install webpack-dev-server -g
②在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server --save-dev
③使用命令webpack-dev-ser