欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Webpack安装使用,ES6语法规范练习

程序员文章站 2022-03-23 18:37:32
1.模块化让我们可以进行模块化开发,并且会帮我们处理模块之间的依赖关系,而且不仅仅时javaScript文件,我们的css,json,图片,等等,都可以在webpack中当做模块化使用2.打包:模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 向下兼容,webpack模块化打包,webpack为了可以正常运行必须依赖于nodenode环境....

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,对js语法进行降级兼容,使用ES6规范所写的代码,进行ES5兼容

模块化

让我们可以进行模块化开发,并且会帮我们处理模块之间的依赖关系,而且不仅仅是JavaScript文件,我们的css,json,图片,等等,都可以在webpack中当做模块化使用

打包:

模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 向下兼容,

webpack模块化打包,webpack为了可以正常运行必须依赖于node
node环境为了可以执行很多代码,必须其中包含各种依赖包
npm工具(node package manage)

Webpack安装使用,ES6语法规范练习

webpack下载

  • npm install webpack -g package --registry=https://registry.npm.taobao.org
  • npm install webpack-cli -g package --registry=https://registry.npm.taobao.org
    Webpack安装使用,ES6语法规范练习
  • 检查安装是否成功:webpack -v
    Webpack安装使用,ES6语法规范练习

创建一个项目练习ES6语法规范

  • export:暴露方法,类似与java的访问修饰符,在别处导入此js即可掉用此方法正在向面向对象的趋势发展
  • require("./hello");:导入hello.js类似于java的导包操作,hello 类似于Java中的对象,可以调用hello.js暴露(export)的方法,

hello.js

/**
 * export暴露方法,类似与java的访问修饰符,
 * 在别处导入此js即可掉用此方法
 * 正在向面向对象的趋势发展
 */
export function run(){
    document.write("一起跑起来呀。。。");
}

index.js

/**
 *导入hello.js类似于java的导包操作,
 * hello 类似于Java中的对象,可以调用hello.js暴露(export)的方法,
 */
let hello = require("./hello");
hello.run();

webpack.config.js属性介绍

Webpack安装使用,ES6语法规范练习

  • 创建一个webpack.config.js打包配置类
module.exports={
    entry: './modules/index.js',//标识此js为主入口,类似与java中的main方法
    output:{
        filename: './js/boundle.js'//将打包好的文件生成一个boundle.js,使用时引入此js即可,类似与java中的target文件夹
    }
}
  • 执行webpack(本质就是将ES6的语法规范改为ES5可使用的)Webpack安装使用,ES6语法规范练习
  • 打包成功生成boundle.js文件
    Webpack安装使用,ES6语法规范练习
  • 在html中引入boundle.js即可使用<script src="dist/js/boundle.js"></script>

本文地址:https://blog.csdn.net/qq_44621891/article/details/109729413