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版本不兼容

到此这篇关于webpack自动打包的文章就介绍到这了,更多相关webpack自动打包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！