webpack自动打包功能实现

一、了解webpack

当前web开发面临的困境
1.文件依赖关系错综复杂
2.静态资源请求效率低
3.模块化支持不友好
4.浏览器对高级javascript特性兼容程度较低

webpack是前端项目构建工具（打包工具）
提供了有好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大功能

二、在项目中安装和配置webpack

1.运行npm install webpack webpack-cli -D命令，安装webpack相关的包
2.在项目根目录中，创建名为webpack.config.js 的webpack配置文件‘
3.在webpack的配置文件中，初始化如下配置：

 module.exports = {
      mode:'development'  //mode用来指定构建模式
 }

4.在package.json配置文件中的scripts节点下，新增dev脚本如下：

  "script":{
       "dev":"webpack"  //script节点下的脚本，可以通过npm run执行
  }

5.在终端中运行npm run dev命令，启动webpack进行项目打包

三、webpack的打包

1.默认打包的入口文件为src下的index.js，默认打包的输出文件为dist下的main.js
2.若要修改打包的入口和出口，可以在webpack.config.js中新增如下配置：

const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

3.运行npm run dev进行打包，会发现在dist文件中出现bundle.js文件
4.将bundle.js引用到index.html中，运行页面。

四、webpack的自动打包

1.为什么要进行自动打包？
        若修改js中的样式，例如jquery中的 $(‘li:odd’).css(‘backgroundColor’,‘red’）代码，会发现页面样式并没有发生改变，因为我们在index.html中引入的是bundle.js而不是index.js,所以每次修改代码都得npm run dev 进行打包，自动打包会更方便，也就是热更新。
2.配置webpack的自动打包功能
（1）运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
（2）修改package.json -> scripts 中的dev命令如下：

 "scripts":{
      "dev":"webpack-dev-server"   //script节点下的脚本，可以通过npm run 执行
 }

（3）将src -> index.html中，scripts脚本的引用路径，修改为“/bundle.js”，该文件是虚拟的，看不见的。
（4）运行npm run dev命令，重新进行打包
（5）在浏览器中访问http://localhost:8080地址，查看自动打包效果

若出现 Cannot find module ‘webpack-cli/bin/config-yargs’
问题，可能是webpack与webpack-dev-server版本不兼容