前端工程化与webpack(一)

简介: 前端工程化与webpack

实际开发中不需要自己配置webpack,有CLI一键生成带有webpack的项目

前端工程化与webpack

1前端工程化

在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终就是实现前端的模块化、组件化、规范化、自动化。

1.模块化

js的模块化、css的模块化、其他资源的模块化

2.组件化

复用现有的UI结构、样式、行为

3.规范化

目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理

4.自动化

自动化管理、自动部署、自动化测试

目前前端工程化的主流解决方案:

webpack

webpack链接

parcel

parcel链接

2webpack的基本使用

2.1什么是webpack

webpack是前端项目工程化的具体解决方案。

webpack提供了前端模块化开发支持,以及代码压缩、处理浏览器js的兼容性、性能优化等功能。

2.2通过项目体验webpack

2.2.1创建列表隔行变色项目

1.新建项目空白目录,并运行 npm init -y命令,初始化包管理配置文件package.json

2.新建src源代码项目

3.新建src -> index.hmtl 首页和src -> index.js 脚本文件

4.初始化页面基本结构

5.运行 npm install jquery -S命令,安装jQuery

6.通过ES6 模块化的方式导入jQuery,实现列表隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <!-- <script src="../dist/main.js"></script> -->
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>
</body>
</html>
// 使用ES6导入语法,导入jQuery
import $ from 'jquery'
// 定义jQuery的入口
$( function() {
    $('li:odd').css('background-color', 'blue');
    $('li:even').css('background-color', 'yellow');
} )

使用ES6导入语法,导入jQuery,存在浏览器的兼容性问题

import $ from ‘jquery

会报错,样式会无法显示,需要安装webpack

2.2.2在项目中安装webpack

npm install webpack webpack-cli -D

-D 装完后,把信息记录到package.json的devDependencies

-S 装完后,把信息记录到package.json的dependencies

项目开发和上线都要用到的包,用-S;只在开发阶段用,用-D

-S是–save的简写;-D是–save-dev的简写

更多可在npm官方网站查询

2.2.3在项目中配置webpack

1.在项目的根目录中创建webpack.config.js的webpack的配置文件,并初始化如下的基本配置:

// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    //development 开发时使用
    //production 上线时使用
    //development 打包时间短 文件大  开发用;   production打包时间长 文件小 项目上线用
    mode: 'development'
}

注意:

凡是修改了webpack.config.js 配置文件,或修改了package.json配置文件,必须重启实时打包的服务器,否则最新的配置文件无法生效!

mode的可选值:

mode节点的可选值有两个,分别是:

1.development

开发环境

不会对打包生成的文件进行代码压缩和性能优化

打包速度快,适合在开发阶段使用

2.production

生产环境

会对打包生成的文件进行代码压缩和性能优化

打包速度很慢,仅适合在项目发布阶段使用

2.在webpack.json的script节点下,新增dev脚本

"scripts": {
  //script节点下的脚本可以通过npm run 脚本名 执行
    "dev": "webpack"
},

3.在终端运行

npm run dev

2.3webpack.config.js的作用

webpack.config.js是webpack的配置文件,webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。

由于webpack是基于node.js开发出来的打包工具,在它的配置文件中支持使用node.js的相关语法和模块进行webpack的个性化配置。

2.4webpack的默认约定

在webpack4.x 和 5.x 的版本中,

1.默认的打包入口为src -> index.js

2.默认的输出文件路径为 dist -> main.js

可以在webpack.config.js中修改打包的默认约定。

2.5自定义打包的入口和出口

在webpack.config.js中,通过entry节点指定打包的入口,output节点指定打包的出口。

示例代码:

//导入node.js中操作路径模块
const path = require('path');
module.exports = {
  // 代表webpack运行的模式,可选值有两个development和production
  // development 代表开发时
  // production 产品将要发布时
    mode: 'development'
    // webpack.config.js 所在文件夹中的 src 文件夹下的 index 文件
    entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
    output: {
      // webpack.config.js 所在文件夹中的 dist 文件夹下
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'main.js' //输出文件名称
    }
}

3webpack中的插件

3.1webpack插件的作用

安装和配置第三方插件,拓展webpack的能力,从而让webpack用起来更方便。

常用的webpack插件:

1.webpac-dev-server:

每当修改源代码,webpack会自动进行项目的打包和构建

2.html-webpack-plugin:

可以通过此插件自定制index.html页面的内容

3.2webpac-dev-server

3.2.1安装 webpac-dev-server

运行如下命令安装插件:

npm install webpac-dev-server -D

3.2.2配置 webpac-dev-server

1.修改package.json中的script的dev命令:

"scripts": {
   "dev": "webpack serve"
 },

2.再次运行 npm run dev。

3.在浏览器中访问 http://localhost:8080/ 查看打包效果。

webpack会启动一个实时打包的http服务器。

如果报错了是webpack-cli的版本不兼容,重新安装webpack-cli的最新版本。

npm install webpack webpack-cli -D

3.2.3打包生成文件的位置

不配置webpack-dev-server的情况下,webpack打包生成的文件,会存放到实际的物理磁盘上。

严格遵守开发者在webpack.config.js 中指定配置

根据output节点指定路径进行存放

配置了webpack-dev-server 之后,打包生成的文件存放到了内存中

不再根据output节点指定的路径,存放到实际的物理磁盘上

提高了实时打包输出的性能,因为内存比物理磁盘速度快很多

webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中而且是虚拟的、不可见的

3.2.4修改html中引入的js文件路径

由于:

i 「wds」: Project is running at http://localhost:8080/

i 「wds」: webpack output is served from /

对应的文件在内存中,文件之间的关系发生了变化。

所以需要修改html中导入的js。

<script src="/main.js"></script>

在浏览器中打开 http://localhost:8080/ 打开src(浏览器会自动打开index.html)

3.3html-webpack-plugin

3.3.1html-webpack-plugin作用

html-webpack-plugin会把指定的页面复制到根目录中,在复制页面的同时会自动注入一个脚本,使得可以直接访问链接查看网页的效果,不用在点击src文件夹。

3.3.2安装 html-webpack-plugin

npm install html-webpack-plugin -D

3.3.3在webpack.config.js文件中配置

配置之后的webpack.config.js文件:

//导入html-webpack-plugin插件 得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new构造函数创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})
// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin]
}

通过插件复制到项目根目录的index.html会被放到内存中,插件在生成index.html页面会自动注入打包的index.js文件。

3.4devServer节点

在webpack.config,js配置文件中,可以通过devServer节点对 webpack-dev-server插件进行更多的配置。

3.4.1设置打包完成后自动打开浏览器

// 使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式,可选值有两个development和production
    mode: 'development',
    // 插件的数组 将来webpack在运行时会加载并调用这些插件
    plugins: [htmlPlugin],
    devServer: {
        // 首次打包成功后自动打开浏览器
        open:true,
        // 在http协议中如果端口号为80可以省略
        port:80,
        // 指定主机运行的地址
        host:'127.0.0.1' 
    }
}


相关文章
|
9天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
14天前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
1月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
68 13
|
2月前
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
28 1
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
37 0
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
54 0
|
3月前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
52 6
|
3月前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
43 1
|
3月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
29 0
下一篇
无影云桌面