首页 > 其他分享 >webpack 工程化

webpack 工程化

时间:2023-06-26 23:55:40浏览次数:40  
标签:npm dev server webpack 工程化 js

前端工程化 webpack

html自动快速生成语法
ul>li{这是第$个li}*9

1.新建项目目录,运行 npm init -y 初始化package.json
2. npm install jquery -s 安装jquery

项目中安装webpack -D 代表 devDependencies
npm install webpack@5.42.1 webpack-cli@4.7.2 -D


webpack的基本使用
执行流程 npm run dev 会执行script下的dev对应的webpack,然后去读取根目录下webpack.config.js配置

webpack 的默认文件入口文件 src/index.js (entry 可以执行入口文件)
默认输出文件路径 dist/main.js

webpack 插件
webpack-dev-server 当源代码修改,自动对项目进行打包和构建,并存放内存

安装webpack-dev-server:npm install webpack-dev-server@3.11.2 -D
配置 package.json中修改
"scripts": {
"dev": "webpack serve"
}

标签:npm,dev,server,webpack,工程化,js
From: https://www.cnblogs.com/ptcnblog/p/17507500.html

相关文章

  • webpack中plugins 和module 有什么不同
     在Webpack中,plugins和module是两个关键配置项,用于不同的目的。plugins:plugins是Webpack的插件系统,用于在打包过程中执行各种额外的任务和功能。插件可以用于优化、压缩、转换文件,以及执行其他自定义操作。它们可以在整个打包过程的不同阶段进行干预,从而扩展Webpack的......
  • vue06_前端工程化
    今日目标1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用1.模块化的分类A.浏览器端的模块化1).AMD(AsynchronousModuleDefinition,异步模块定义)​代表产品为:Require.js​2).CMD(CommonModuleDefi......
  • 前端工程化 (开始)
    为何偏偏JavaScript没有模块呢?如果要追溯历史原因,JavaScript之父——BrendanEich最初设计这门语言时只是将它定位成一个小型的脚本语言,用来实现网页上一些简单的动态特性,远没有考虑到会用它实现今天这样复杂的场景,模块化当然也就显得多余了。随着技术的发展,JavaScript已经不仅仅......
  • webpack打包自动上传到指定目录
    webpack打包生成一个静态目录文件,可以通过webpack将打包的文件移到指定目录文件进行提交,自动化构建上传编写一个webpack插件build.after.jsconstpluginName='ConsoleLogOnBuildWebpackPlugin';letfs=require('fs-extra');constprocess=require('process');const......
  • 【webpack系列】从基础配置到掌握进阶用法
    前言本篇文章将介绍一些webpack的进阶用法,演示内容继承自上一篇文章的内容,所以没看过上一篇文章的建议先学习上一篇内容再阅读此篇内容,会更有利于此篇的学习~文件指纹文件指纹指的是打包输出的文件名后缀,一般用来做版本管理、缓存等webpack的指纹策略有三种:hash、chunkhash......
  • 【工程化】Android开发电脑中都装了哪些软件
    写在前面工欲善其事,必先利其器。作为一名Android开发者,在开始正式开发之前,给电脑安装各种开发相关软件是必不可少的。今天来罗列下我电脑中装的那些开发相关的软件,一来换新电脑时,可以方便根据应用清单安装软件,二来如果你是刚从事Android开发,也可以参考着安装这些软件,希望可以帮助到......
  • 如何降低Vue.js项目中Webpack打包文件的大小?
    结论结论:vue中,直接引用文件,可以让打包文件最小。试验记录下面测试项目中引入一个Button组件的代价。基准工程大小:[raywill:shop]npmrunbuild>shop@build/Users/raywill/code/vue/shop>cross-envNODE_ENV=productionwebpack--progress--hide-modulesHash:d902d9dc5e......
  • VUE+WebPack游戏设计:'乘法防线'游戏设计
    从本节开始,我们进入新的游戏设计阶段。本次游戏设计,我们需要使用html5专有的canvas,也就是画布对象。同时为了便于在canvas上绘制图案,我们引入一个第三方库叫做CreateJS,它能帮我们管理在canvas上绘制的各种图形。乘法防线的游戏目的是为了帮助小学生学习乘法运算法则。游戏的主要内......
  • React - 02 React的工程化/组件化开发
    我们可以基于webpack自己去搭建一套工程化打包的架子,但是这样非常的麻烦/复杂;React官方,为我们提供了一个脚手架:create-react-app!!脚手架:基于它创建项目,默认就把webpack的打包规则已经处理好了,把一些项目需要的基本文件也都创建好了!!1.create-react-app基础运用安装脚手架$npmicrea......
  • Webpack 插件实现 CSS 样式尺寸单位转换
    Webpack插件实现CSS样式尺寸单位转换实现方式一插件代码以下是编写的一个Webpack插件,用于将样式文件中以rpx为单位的值转换为以px为单位的值(换算比率为1px=2rpx):constpluginName="CssSzieConvertPlugin";classCssSzieConvertPlugin{apply(compiler){......