【webpack4系列】webpack初识与构建工具发展(一)

文章目录

为什么需要构建工具?

  • 转换 ES6 语法
  • 转换 JSX
  • CSS 前缀补全/预处理器
  • 压缩混淆
  • 图片压缩

前端构建演变之路

  • ant + YUI Tool
  • grunt
  • gulp、fis3
  • webpack、rollup、parcel

为什么选择 webpack?

  • 社区⽣态丰富
  • 配置灵活和插件化扩展
  • 官⽅方更新迭代速度快

初识webpack,简单的例子入手

安装

先确保你已经安装了 Node

其中检查node是否安装成功,使用node -v;检查npm的版本使用npm -v。

创建一个新的项目来开始我们的 webpack 之旅:

复制代码
mkdir webpack-custom
cd webpack-custom

使用npm init -y来创建一个「package.json」文件用于管理项目版本和依赖,然后我们使用 npm安装webpack4版本:

复制代码
npm i webpack@4 webpack-cli@3 -D

webpack-cli 是使用 webpack 的命令行工具,在 4.x 版本之后不再作为 webpack 的依赖了,我们使用时需要单独安装这个工具。

检查是否安装成功:

mac系统:./node_modules/.bin/webpack -v

window系统:.\node_modules\.bin\webpack -v

安装成功之后,我们可以在项目的「package.json」文件中看到对应的 webpack 版本依赖:

复制代码
"devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
 }

构建

安装完成之后,我们可以使用npx webpack命令来运行项目内安装的 webpack。

其中,我们可以使用如下命令执行一些操作:

  • npx webpack --help:查看 webpack-cli 提供了哪些命令可用
  • npx webpack --version:查看我们安装的版本
  • npx webpack:运行构建

我们先添加两个简单的代码文件,「src/index.js」和「src/hello.js」,如代码:

index.js代码:

复制代码
import { hello, log } from './hello.js';
log(hello);

hello.js代码:

复制代码
export const hello = 'hello world';

export function log(message) {
  console.log(message);
}

我们执行npx webpack会在src同级目录生成一个dist/main.js文件,这就是使用webpack构建的结果,当然构建我们也可以使用如下命令执行:.\node_modules\.bin\webpack

,我们也可以npm script运行webpack,也即是把构建命令写到 package.json 的 scripts 中:

复制代码
 "scripts": {
    "build": "webpack"
  },

然后我们就可以使用npm run build命令构建webpack了。

配置文件

接下来我们尝试创建一个webpack的配置文件,在我们项目的根目录下创建一个「webpack.config.js」的文件:

复制代码
'use strict';
var path = require('path');
module.exports = {
    mode: 'development',  // 指定构建模式
    entry: './src/index.js', // 指定构建入口文件
    output: {
        path: path.join(__dirname,'dist'), // 指定构建生成文件所在路径
        filename: 'bundle.js' // 指定构建生成的文件名
    },
}

然后我们执行npm run build,就会生成「dist/bundle.js」文件,这说明配置文件生效了。

本地开发

在日常开发中,我们不可能每次修改一次代码就执行一次构建,我们需要一个方便本地开发的工具,和 webpack 配套的则是 webpack-dev-server。同样的,我们使用 npm 来安装:

复制代码
npm install webpack-dev-server@3 -D 

同样地,我们在「package.json」文件的 scripts 字段中添加一个启动开发服务器的命令,如:

复制代码
"scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
}

这个时候我们还需要一个「index.html」文件作为页面的基础,webpack 暂时没有能力来处理 html 文件(需要通过插件来处理),我们先在 dist 目录下创建一个「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>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

同时,在配置文件中添加指定开发服务器启动路径的配置:

复制代码
 devServer: {
    contentBase: path.resolve(__dirname, 'dist') // 开发服务器启动路径
 }

接着再执行 npm run serve,便可以成功启动webpack-dev-server了,默认使用的端口是 8080,用浏览器打开 http://localhost:8080/,便可以访问到我们刚才创建的 html 文件了,打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。

相关推荐
狗头大军之江苏分军5 分钟前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding5 分钟前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate17 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger17 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98124 分钟前
基于webpack的场景解决
前端·webpack
奶昔不会射手37 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy41 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy1 小时前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵1 小时前
vue3和vue2生命周期的区别
前端·javascript·vue.js