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

目录

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

模块化

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

打包：

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

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

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 -v
  

创建一个项目练习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.config.js打包配置类

module.exports={
    entry: './modules/index.js',//标识此js为主入口，类似与java中的main方法
    output:{
        filename: './js/boundle.js'//将打包好的文件生成一个boundle.js,使用时引入此js即可，类似与java中的target文件夹
    }
}

• 执行webpack（本质就是将ES6的语法规范改为ES5可使用的）
• 打包成功生成boundle.js文件
  
• 在html中引入boundle.js即可使用<script src="dist/js/boundle.js"></script>

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