webpack实例1

最新推荐文章于 2023-01-15 13:37:03 发布
最新推荐文章于 2023-01-15 13:37:03 发布
阅读量210 收藏
点赞数
分类专栏： web前端基础 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icebns/article/details/102759037
版权

实例文件目录：

index.html：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>webpack01</title> 

    </head>

    <body>

        <p>原网页</p>

        

        <script src="js/index.js" type="module"></script>

    </body>

</html>

 

 index.js：

import {createContent} from "./content.js"

import {createHeader} from "./header.js"

import {createSilder} from "./silder.js"

let root = document.querySelector("body");

 

createHeader(root)

createSilder(root)

createContent(root)

header.js

 

export function createHeader(root){

    let elHeader = document.createElement("h3");

    elHeader.innerText = "网页头部内容";

    root.appendChild(elHeader)

}

 

silder.js

export function createSilder(root){

    let elSilder = document.createElement("div");

    elSilder.innerText = "网页侧边栏1";

    root.appendChild(elSilder)

}

 

content.js

 

export function createContent(root){

    let elContent = document.createElement("div");

    elContent.innerText = "网页内容ti";

    root.appendChild(elContent)

} 

命令行执行语句 npx webpack js/index.js

 

最后修改index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>webpack01</title> 

    </head>

    <body>

        <p>原网页</p>

        

        <script src="dist/main.js" type="module"></script>

    </body>

</html>

简单的打包就完成了。

如果此时再修改silder.js文件内容，网页不会修改。

再次命令行输入npx webpack js/index.js。网页成功修改更新为新版本。

 

新建webpack.config.js（配置文件）在根目录下

let path = require("path");

//es5写法，等同import

module.exports={

    entry:"./js/index.js",

    output:{

        filename:"aaa.js",

        path:path.resolve(__dirname,"bunble")

    }

} 

在index.html页面 进行修改路径为新写路径

命令行执行npx webpack

开发环境下打包添加一行mode:"development"

module.exports={

    mode:"development",

    entry:"./js/index.js",//入口

    output:{//出口

        filename:"aaa.js",

        path:path.resolve(__dirname,"bunble")

    }

}

打包出的内容会带有注释和换行 

icebns
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack实例代码
08-02
博客中webpack实例的代码,已删除node_module文件夹,专栏地址:https://blog.csdn.net/column/details/25661.html
Webpack使用案例
weixin_44610169的博客
09-01 354
Webpack是一个前端资源加载/打包工具（因为js、css文件太多），可以将多个静态资源（js、css、less）转换成一个静态文件，减少了页面的请求，降低服务器压力，提高访问效率。
webpack基础概念解析和示例
bajiucoding
01-15 762
webpack核心概念解析和代码实例
webpack入门（快速实例）一
qq_30764777的博客
12-17 405
前言： webpack入门系列主要参考了姜瑞涛的教程，内容深入浅出，作为入门教学，对webpack系统化学习十分有帮助，感兴趣的小伙伴可以去看一看姜瑞涛的官网。这里的文章主要是结合自己的操作，与可能面临的问题做的个人总结。 前两篇文章已经分享了如何安装node环境与配置，以及利用vue-cli3来初步构建我们的项目，但vue-cli3内部高度集成了webpack，所以没有暴露webpack的配置文件，但项目上一般我们依然需要创建vue.config.js去修改默认的webpack，因此下面我们来系统学习
手摸手实现一个webpack
astonishqft的博客
03-12 2364
一文带你了解webpack的打包机制，手把手教你如何实现一个简易版的webpack
Webpack打包实例测试代码
03-28
Webpack打包实例测试代码
webpack4简单入门实例
10-18
主要介绍了webpack4简单入门实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack使用ParallelUglifyPlugin实例
04-17
webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例
webpack使用DllPlugin实例
04-17
本书既适合 JavaScript 语言初学者阅读，又适合经验丰富的 JavaScript 开发人员深入学习。
ice-scripts：建议升级到icejs。基于webpack的高可配置开发内置工具
02-04
English | 冰脚本 :monkey: 基于webpack的React项目的可配置构建工具。 在查找详细说明 产品特点 ice-scripts具有构建React应用所需的一切： 可通过ice.config.js进行完全配置，允许您的项目进行配置 插件系统提供了丰富的功能，并允许社区构建可重用的解决方案 对ES6 +，TypeScript，Less，Sass，CSS模块的开箱即用支持 通过webpack-chain轻松修改内置的webpack配置 基于Jest的令人愉快JavaScript测试 入门 推荐通过创建一个React应用 # Install deps $ npm install icewo
Webpack入门之一：从一个简单例子入门
Lee Chen的博客
06-13 5110
通过一个简单的例子，初步理解webpack原理以及使用方式。
webpack学习笔记实例
mus-z的博客
07-31 972
webpack-尚硅谷 https://www.bilibili.com/video/BV1e7411j7T5?p=39 可以去gitee看一下我里面有资料和demo 文章目录webpack-尚硅谷概述五个核心概念看演示~如何打包样式：如何打包html：打包图片：打包其他资源：热加载devServer开发环境搭建生产环境的痛点cssjshtml生产环境配置webpack优化配置开发环境性能优化：优化打包构建速度-HRM优化代码**调试**-source-map生产环境性能优化优化打包构建速度-oneOf优化
webpack实例解析四（根据环境分离配置）
秋刀鱼笛滋味
08-12 836
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。 开发环境：我们需要：强大的 source map（源码映射-> debug） 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server（本地服务器）。 生产环境：关注点在于压...
1、最简单的webpack实例
源码好优多
01-09 531
0.1、安装webpack 首先你需要安装Node.js，点击打开Node.js下载页面。安装完Node.js后，会自带npm包管理器。 npm install webpack -g 这个命令将安装最新版本的webpack（全局) webpack -v 0.2、查看当前webpack版本 执行命令： 以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。 快速
webpack打包示例
qq_44140870的博客
07-17 295
简要的webpack配置与说明
webpack4源码分析
weixin_33688840的博客
12-18 524
webpack设计模式 Webpack 源码是一个插件的架构，他的很多功能都是通过诸多的内置插件实现的。Webpack为此专门自己写一个插件系统，叫 Tapable 主要提供了注册和调用插件的功能。 Tapable tabpable是一个事件发布订阅插件，它支持同步和异步两种；在需要使用的类上继承tabpable，并且该类的构造函数中使用this.hooks添加事件名称。 this.hook...
webpack 笔记，一个简单例子
Wanan
11-26 436
项目准备cnpm install webpack -g // 全局安装 cnpm init // 初始化项目 cnpm install webpack --save // 本地安装 cnpm install html-webpack-plugin --save // 把编译后的文件放到html文件 cnpm install style-loader css-loader --save // css
Webpack整合实例及优化
雾里看花叹朦胧
11-09 1426
本文章之前有写过关于 webpack 中如何使用 hash 和 devserver 的例子，有需要的可以去查看一下： 如何使用 Hash: http://blog.csdn.net/hsl0530hsl/article/details/78474026 如何使用 Server: http://blog.csdn.net/hsl0530hsl/article/details/78419693本文主
webpack安装
icebns的博客
10-26 193
1.需要node.js 安装nodejs node下载地址https://nodejs.org/en/ 2.初始化 建立一个空文件夹（我自己的命名是webpacklearning） 命令行输入 npm init 最后一步写yes再回车 此时再看文件夹，里面多了package.json 点开编辑可以看到内容为刚刚填写内容（此处是默认填写的） 其中第五行 "main...
webpack优化方法
最新发布
06-12
4. 开启多进程/多实例构建：使用 webpack-parallel-uglify-plugin 或 thread-loader 插件，可以让 webpack 开启多个进程或者多个实例来处理任务，从而提升构建速度。 5. 使用 Tree Shaking：Tree Shaking 是一个很...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值