Webpack作用：

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

简单说：是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS图片等都作为模块来处理和使用。

Webpack安装：

npm install webpack -g
npm install webpack-cli -g

测试安装成功：

webpack -v
webpack-cli -v

Webpack的配置：

创建 webpack.config.js 配置文件

  • entry：入口文件，指定WebPack用哪个文件作为项目的入口
  • output：输出，指定WebPack把处理完成的文件防止到指定的路径
  • module：模块，用于处理各种类型的文件
  • plugins：插件，如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听，用于设置文件改动后直接打包

Webpack的使用：

  1. 创建项目，使用idea或者编程软件打开
  2. 创建一个名为modules的目录，用于放置JS模块等资源文件
  3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关文件
//暴漏一个方法：sayHi
exports.sayHi = function(){
    document.write("<div>say hi，大吉吉</div>");
 };
  1. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");//./是本目录，下面的文件
hello.sayHi();//模块化，调用hello.js里面暴漏出来的方法，必须是暴漏出来的方法，exports暴漏出来
  1. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={
  //入口文件
  entry:'./modules/main.js',
  //输出文件，生成js文件
  output:{
    filename:"./js/bundle.js"
  }
};

路径模块等，示例：

vue之Webpack_html

  1. 在项目目录下创建HTML页面，如index.html，导入WebPack打包后的JS文件
<html>
<head>
  <mete charset="UTF-8">
  <title>吉吉说hi</title>
</head>
<body>
  <!--导入样式，会直接将执行sayHi方法，将标签展示出来-->
  <scrity src="dist/js/bundle.js"></scrity>
</body>
</html>
  1. 在IDEA控制台中直接执行webpack；如果失败的话使用管理员权限运行即可！
  2. 运行HTML看效果

//参数 --watch 用于监听变化
修改hello.js main.js和打包配置文件，是热部署
webpack --watch