webpack

2024-02-20 20:17:52

Webpack

1. 简介

webpack它是代码编译工具，有入口，出口、loader和插件。其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。

Webpack是一个模块加载器兼打包工具

作用

将es6的代码打包编译成es5规范

2. 安装

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

测试

webpack -v

webpack-cli -v

3. 配置

entry

入口文件，指定webpack用那个文件为项目的入口

output

输入的文件，指定处理完的文件位置

module

模块，类似jar包

plugins

插件

resolve

设置路径指向

watch

监听，用于设置文件改动后自动打包

4. 使用webpack

创建一个空项目

创建modules文件夹

编写hello.js

//暴露自己
exports.sayHi = function (){
    document.write("<h1>ES6 hello</h1>")
}

编写main.js

//导入一个module
var hello = require("./hello");

hello.sayHi();

创建webpack配置 webpack.config.js

这里的配置文件必须是webpack.config.js 不然你懂的

module.exports = {
    // 程序的入口
    entry: './modules/main.js',
    //输出到文件到哪里
    output: {
        filename: "./js/bundle.js"
    }
}

cmd 输入 webpack 打包命令

打包后的文件bundle.js

(()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("<h1>ES6 hello</h1>")}}},t={};(function e(o){if(t[o])return t[o].exports;var n=t[o]={exports:{}};return r[o](n,n.exports,e),n.exports})(645).sayHi()})();

创建index.html 导入js 看看页面有没有显示 it's ok

5. 参数

//参数 --watch 用于监听变化  js有变动就会重新打包

webpack --watch

码农公寓