亲宝软件园·资讯

展开

webpack自动打包功能实现

海绵饱饱_wk 人气:0

一、了解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版本不兼容

加载全部内容

相关教程
猜你喜欢
用户评论