webpack入门教程

本文介绍了Webpack的基本概念和使用方法,Webpack是一种模块打包器,用于解决前端项目中文件引用和依赖问题,支持多种模块化规范,如CommonJS、AMD等。文章详细讲解了Webpack的配置项,包括Entry、Output、Loaders、Plugins和Mode,并通过实际案例展示了如何使用Webpack进行项目构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

初识webpack

webpack把所有文件都看做模块,webpack会理清所有文件之间的引用关系,然后打包到一起。

可以把webpack看做java,c++编译器,我们抽象不同功能到不同的文件,文件之前相互引用,但是编译器依旧能够将所有文件关系理清并编译成二进制文件。我们只需要把精力放到业务实现。同理,你可以把功能抽象到不同的JS文件中,使用ES6,ES5等,作为开发语言,webpack都能够将你的js文件编译打包成,任何浏览器都能够支持的js文件。
在这里插入图片描述

为什么要使用webpack?

  • 随着前端不断发展,前端功能、逻辑越来越复杂,需要引入工程化思维来管理前端项目。
  • js插件越来越来,每实现一个功能都要去相应的网站下载并引用到html页面中,页面非常臃肿,而且好要梳理好插件之间的依赖前后关系,使用webpack结合npm,自动下载功能插件并附带相应的依赖包。

模块化在之前就有过相关的插件,commonjs,requriejs,这些插件都可支持模块化开发。可以说这是前端发展的一个过程,从同步模块化开发,到AMD异步模块化开发,到webpack支持同步,异步,模块化,打包等。

webpack主要的概念

  • Entry :项目的主要入口,也是一个js模块文件,相当于其他开发语言中的Main 函数,webpack通过这entry point file 找到所有与它有直接或者间接联系的模块文件。
  • Output: webpack编译打包后的输出口,默认情况下输出./dist/main.js,可以根据需求自己定义
  • loaders:默认情况下,webpack只能够识别javascript与Json文件。使用loaders可以将css样式文件也一起打包成束。ES6已经逐渐成为前端javascript标准,但是依旧有些浏览器不支持ES6,通过loaders可以将ES6转成ES5。
  • Plugins:可以说是对loaders的补充,它提供了更多的解决方案,比如将webpack打包的束最小化与优化
  • Mode:一共有三种, development ,production ,none;之间的区别可以查看:Model configuration page.

webpack实践

npm是一个js包管理器,主要功能跟Java的Maven或者Python的pip比较像,这里不做主要介绍。

mkdir webpack_learn
cd webpack_learn 
npm init -y
(base) ➜  webpack_learn npm init -y
Wrote to /Users/penzhu/Desktop/webpack_learn/package.json:

{
  "name": "webpack_learn",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {},
  "description": ""
}

webpack可以安装到本地或者全局,这里将webpack安装到本地。

npm install webpack webpack-cli --save-dev

后面npm下载的包,都会在node_models文件夹下。

将webpack简单的运行命令,添加到npm中,打开package.json,修改scripts部分如下:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

配置成功后,就可以直接用npm run dev or build来执行webpack命令。

在src文件夹下新建一个index.js文件

添加下面内容

alert("Hi , Welcome to learn webpack")

注意:index.js文件名称是webpack默认的entry文件,如果需要自定义需要配置webpack.config.js文件

执行命令

(base)  npm run dev                               

> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development

Hash: 59b7b1c9078eca56d3d6
Version: webpack 4.41.2
Time: 58ms
Built at: 10/17/2019 10:45:10 AM
  Asset      Size  Chunks             Chunk Names
main.js  3.81 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 38 bytes {main} [built]
(base) ➜  src 
(base) ➜  webpack_learn ll
total 304
drwxr-xr-x    8 penzhu  staff     256 Oct 17 10:45 ./
drwx------+  33 penzhu  staff    1056 Oct 17 08:36 ../
-rw-r--r--@   1 penzhu  staff    6148 Oct 17 10:32 .DS_Store
drwxr-xr-x    3 penzhu  staff      96 Oct 17 10:45 dist/
drwxr-xr-x  317 penzhu  staff   10144 Oct 17 10:27 node_modules/
-rw-r--r--@   1 penzhu  staff  143136 Oct 17 10:27 package-lock.json
-rw-r--r--@   1 penzhu  staff     392 Oct 17 10:37 package.json
drwxr-xr-x    3 penzhu  staff      96 Oct 17 10:37 src/
(base) ➜  webpack_learn ls dist 
main.js

查看打包编译后的main.js内容

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("alert(\"Hi , Welcome to learn webpack\")\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

在输出目录./dist 下,新建一个index.html文件来引用mian.js看一下效果。

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

在这里插入图片描述
使用npm+webpack 引入echarts

(base) ➜  webpack_learn npm install echarts                                              
npm WARN webpack_learn@1.0.0 No description
npm WARN webpack_learn@1.0.0 No repository field.

+ echarts@4.4.0
added 2 packages and audited 6791 packages in 4.297s
found 0 vulnerabilities

新建一个bar.js组件


var echarts = require('echarts');

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });

修改重命名index.js为app.js

alert("Hi , Welcome to learn webpack")
import "./bar"

新建webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

(base) ➜  webpack_learn npm run dev 

> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development

Hash: e5c6e0df67e1871d303e
Version: webpack 4.41.2
Time: 2461ms
Built at: 10/17/2019 2:57:25 PM
         Asset      Size  Chunks             Chunk Names
main.bundle.js  8.34 MiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.js] 162 bytes {main} [built]
[./src/component.js] 222 bytes {main} [built]
[./src/line.js] 449 bytes {main} [built]
    + 495 hidden modules

在浏览器中查看
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值