网站首页 > 技术文章正文

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

nanyue 2024-09-26 15:08:39 技术文章 5 ℃

Webpack是什么

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

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

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

五个核心概念

入口(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)。

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

上一篇： Webpack5.0 新特性尝鲜实战（webpack详解）
下一篇： Webpack - 手把手教你写一个 loader / plugin

网站首页 > 技术文章 正文