是切图仔还是工程师就看会不会它（webpack-1）

最新推荐文章于 2025-06-26 10:19:30 发布

原创最新推荐文章于 2025-06-26 10:19:30 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

构建工具专栏收录该内容

3 篇文章

订阅专栏

Webpack是什么

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

递归地构建一个依赖关系图(dependency graph)，将前端所有的资源文件（js/css/img/json/…)作为模块处理。

将所有这些模块打包成一个或多个 bundle。

113

五个核心概念

入口(entry)

webpack以哪个文件为入口点开始打包，分析构建内部依赖图

输出(output)

webpack打包后的资源bundles输出到哪里去，以及如何命名

loader

loader让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

插件(plugins)

plugins让webpack用于执行范围更广的任务

模式(mode)

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

Webpack上手

mkdir webpackDemo && cd webpackDemo
npm init -y
npm i --save-dev webpack webpack-cli

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

创建项目目录

mkdir src build
cd src
touch index.js
cd build
touch index.html

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello webpack</h1>
  <script src="./build.js"></script>
</body>
</html>

// index.js
const add = (a, b) => {
  return a + b;
}
console.log('两数相加：', add(1, 2))

这时我们还没有build/build.js文件，等会儿webpack将src/index.js编译之后就有了，敬请期待

配置webpack.config.js

cd webpackDemo
touch webpack.config.js

webpack.config.js是webpack的配置文件：指示webpack怎样运行

我们开始配置

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    // __dirname nodejs的变量 表示当前文件目录的绝对路径
    path: path.resolve(__dirname, 'build')
  },
  module: {},
  plugins: [],
  mode: 'development'
}

查看效果
```
// 在package.json中配置scripts: {"build": "webpack"}
npm run build
```
这时在build目录新增了build.js

浏览器打开build/index.html

热更新

这时候在src/index.js中编写代码，需要重新build。作为一个优秀的切图仔怎么可以容忍

下载webpack-dev-server

npm i webpack-dev-server -D

在webpack.cong.js中配置

devServer: {
	contentBase: path.resolve(__dirname, 'build'),
	// 启动 gzip 压缩
	compress: true,
	// 端口号
	port: 10086,
	// 自动打开浏览器
	open: true
}

查看效果

// 在package.json中配置scripts: {"server": "webpack-dev-server"}
npm run server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

是切图仔还是工程师就看会不会它（webpack-1）

Webpack是什么

五个核心概念

Webpack上手

热更新

关注公众号： 页面仔小杨 【实战干货、原创分享】

关注公众号：页面仔小杨【实战干货、原创分享】