webpack4安装与学习

 

在慕课上学习了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