loaders、plugins、HMR-1

loaders：

概念 | webpack 中文网https://www.webpackjs.com/concepts/#loader

1. 安装loader npm install css-loader style-loader -D，安装完成后会在pachage.js中自动配置2个依赖
2. 编写两个测试文件：
   1. js:

      import './index.css'
      
      console.log('hello')

   2. css:

      body {
        background-color:pink
      }

3. 在webpack.config.js中配置module.rule中进行css的解析配置，进行打包
4. 此时打包报错1：

    发现是全局脚手架和本地脚手架版本不一样，此时可参考npm安装依赖报错：npm ERR A complete log of this run can be found_sai小懒的博客-CSDN博客

   

5. 警告2，没有在webpack.config.js中进行模式配置
   1. 添加配置即可
6. bug3：
   1. index.js中引入css报错，改成import的方式引入
7. 此时再运行npm run build，即可成功打包，在dist文件下成圣一个bundlue.js的文件
8. 进行测试：
   1. 在dist文件夹中新建index.html,引入bundle.js文件，此时打开index.html文件，页面成功展示

配置预编译器：        

1.  下载sass依赖npm install sass-loader -d  npm install node-sass -d
2. 此时需要在webpack.config.js中配置
3. 创建index.scss文件配置背景颜色并在js中引入
4. 打包npm run build
5. 此时dist文件html
6. 

 plugins

1. 下载引入plugins  npm install html-webpack-plugin
2. 配置plugin
3. 此时，npm run build,会自动生成相应的filename的文件，此处生成的是index.html，当前目录下的template文件输出hello！，打包后的页面输出也有hello

 

 

 热编译

 热模块替换：

1. npm install webpack-dev-server -d
2. 具体可以参考官网
3. 此时使用npm run hot,即可实现热编译，打开localhost：8080可以进行实时查看​​​​​​​
4. 即在本地js进行的修改会实时显示在打包中的文件index.html中，需要注意的是，在本地html文件中直接进行修改需要再刷新一下页面才可以