前端篇-webpack一{为了打包而出发} --1

最新推荐文章于 2024-06-21 14:18:49 发布

轻动琴弦

最新推荐文章于 2024-06-21 14:18:49 发布

阅读量744

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hacker12356/article/details/123907877

javascript 同时被 3 个专栏收录

16 篇文章

订阅专栏

html5

6 篇文章

订阅专栏

webpack

4 篇文章

订阅专栏

本文介绍了webpack作为代码编译工具的基本概念和工作原理，包括入口(Entry)、输出(Output)、Loader、Plugins和Mode。通过示例展示了如何处理非JavaScript文件、ES6语法以及资源分类。开发环境与生产环境的差异在于代码优化和压缩。最后，通过实际的目录结构和测试代码，阐述了webpack如何进行代码打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导图

在这里插入图片描述

简介

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

在这里插入图片描述

能做到事

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./use.less" />
</head>

<body>
    <div class="once"></div>
    <script type="text/javascript" src="./dist/bund.js" charset="utf-8"></script>
</body>

</html>

import $ from "jquery"

$(".once").click(() => {
    $('body').css("backgroundColor", "deeppink")
})
document.write("this is one")

window.a = function ccc(a) {
    console.log(a);
}
window.a(1)
window.imgs = require("./img/BM.jpg")

当less需要改变成css时
当使用ES6语法import
当需要文件类型归类时

webpack可以帮你做到

当webpack讲所有资源引进来叫代码块chunk
叫打包
输出bundle
静态模块打包器

5个核心概念

Entry

入口(Enty)指示 Webpack以哪个文件构入口起点开始打包,分析构建内部依赖图

Output

输出( Output)指示 Webpack打包后的资源 bundles输出到哪里去,以及如何命名

Loader

Loader让 Webpack能够去处理那些非 Javascript文件 webpack自身只理解Javascript --翻译

Plugins

插件( Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,直到重新定义环境中的变量等

Mode

模式(Mode)指示 Webpack使用相应模式的配置。

development	production
会将process.env.NODE_ENV的值设为development.启用NamedChunksPlugin和NamedModulesPlugin	会将 process.env.NODE_ENV的值设为production启用FlagDependencyUsagePlugin。FlagincludedChunksPlugin。ModuleConcarenationPlugin。NoEmitOnErrorsPlugin。OccurrenceOrderPlugin。SideEffectsFlagPlugin和UglifyJsPlugin
能让代码本地调试运行的环境	能让代码优化上线的运行环境

结构目录以及测试代码

在这里插入图片描述

 //index.js
 /**
 * webpack 入口起始文件
 * 
 * 开发环境：webpack ./src/index.js -o ./build --mode=development
 * webpack 会以./src/index.js为入口文件开始打包 至./build
 * 整体打包环境 开发环境
 * 
 * 生成环境：webpack ./src/index.js -o ./build --mode=production
 * 
 * 2.结论 
 * a.webpack 能处理json文件 不能处理css、img资源
 * b.生产环境比开发环境多了个压缩diamante
 * c.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
 *  */
import data from './data.json'
console.log(data)

// import './index.css'

function add(x, y) {
    return x + y
}

console.log(add(1, 2))

//data.json
{
    "data":"123"
}

//build/main.js
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e){e.exports=JSON.parse('{"data":"123"}')},function(e,t,r){e.exports=r(2)},function(e,t,r){"use strict";r.r(t);var n=r(0);console.log(n),console.log(1+2)}]);