首页 > 其他分享 >【webpack4系列】webpack初识与构建工具发展(一)

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

时间:2024-09-15 21:04:42浏览次数:7  
标签:npm 文件 webpack4 js webpack 初识 构建 hello

为什么需要构建工具?

  • 转换 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 了。

标签:npm,文件,webpack4,js,webpack,初识,构建,hello
From: https://www.cnblogs.com/moqiutao/p/18415624

相关文章

  • 初识Lambda表达式(匿名函数)
    0.问题导向使用C++STL实现订单按照创建时间从小到大排查。usingOrder=structtagOrder{unsignedintcreateTimspec;//创建时间戳intid;//订单号inttotalPrice;//总价intstatus;//订单状态intp......
  • 【Node.js】初识 RabbitMQ
    概述MQ顾名思义,是消息队列。RabbitMQ是一个消息队列系统,用于实现异步通信。基于AMQP。AMQP(高级消息队列协议)实现了对于消息的排序,点对点通讯,和发布订阅,保持可靠性、保证安全性。在Node.js的微服务架构中,RabbitMQ可以作为服务之间的消息传递中介,帮助解耦系统组件......
  • JavaSE初识(二)
    目录逻辑控制1.顺序结构2.分支结构2.1if结构2.1.1代码2.1.2应用 注意:2.2switch语句:3.循环结构3.1while循环3.2break3.3continue3.4for循环 3.5do...while循环4.输入输出 5.应用 5.1使用Scanner循环读取N个数字5.2猜数字游戏5.3......
  • C语言程序设计(初识C语言后部分)
    不必为小事所困,我们还有更大的世界。(4)模拟实现strlen(求字符串长度)#include<stdio.h>#include<assert.h>//模拟实现strlen(求字符串长度)intmy_strlen(constchar*str)//str指向的数据不需要被修改{ intcount=0; assert(str); while(*str!='\0') { count++;......
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
    **......
  • vue2 webpack打包配置
    序言最近在优化之前做的项目,看到打包后的文件夹,出现很多不需要的文件,想着应该是打包出现了问题,之前没时间优化,现在来看看优化项吧。RemovedPluginError:webpack.optimize.CommonsChunkPluginhasbeenremoved,pleaseuseconfig.optimization.splitChunksinstead以......
  • 密码学初识
    咱也是学上密码学了密码?可能有人要说:啊!这个我懂!不就是账号密码什么的嘛可能还有人说:啊!这个我懂!我还会背摩斯密码呢!但是,“密码学”研究的主要是加密与解密的过程它这个“密码”指的不是寻常说的password(口令),而是cryptography历史上,密码学经过了从古典到近代再到现代的发......
  • 走进C++——初识与探索
    一.C++发展历史  C++的起源可以追溯到1979年,当时BjarneStroustrup(本贾尼·斯特劳斯特卢普)在⻉尔实验室从事计算机科学和软件⼯程的研究⼯作。⾯对项⽬中复杂的软件开发任务,特别是模拟和操作系统的开发⼯作,他感受到了现有语⾔(如C语⾔)在表达能⼒、可维护性和可扩展性......
  • HtmlWebpackPlugin插件和HtmlWebpackInlineSourcePlugin插件的使用
    一、HtmlWebpackPlugin1.作用自动创建HTML自动创建HTML:在构建过程中自动生成一个HTML5文件,该文件可以包含所有webpack打包过程中生成的bundles。这意味着你不需要手动创建HTML文件,插件会为你处理这一切。自动注入资源:自动将打包生成的JavaScript、CSS等文件注入到生成的HTML文......
  • C语言程序设计(初识C语言后部分)
    晴天也会突然下暴雨,温柔的人也会不开心。二十一,实用调试技巧1.什么是bug?2.调试是什么?有多重要?3.debug和release的介绍4.vs环境调试介绍5.如何写出好(易于调试)的代码6.编程常见的错误1.什么是bug?就是使计算机程序或者计算机硬件出现问题,不能正常运行的地方称为bug(缺陷......