webpack 打包自己的--windows

第一步安装node

1、安装nodejs:https://nodejs.org/zh-cn/download/releases/

一、Window系统配置:

打开命令窗口,进入当前工程目录

npm配置淘宝镜像:npm config set registry http://registry.npm.taobao.org/

npm安装parcel-bundler:npm install -g parcel-bundler

运行工程:npm run dev

第二部、安装 Webpack:

npm install --save-dev webpack webpack-cli webpack-dev-server

wiindows 打包方法

第三步进入网站所在目录

四、准住环境,加速

nrm use npm

nrm use taobao

nrm use yarn

// 切淘宝镜像

npm config set registry http://registry.npm.taobao.org/

// 切默认官方镜像地址

npm config set registry https://registry.npmjs.org/

五、准住环境,可以打包html,css,png,js

npm install style - loader css - loader - D


npm install file - loader url - loader - D


npm install file - loader url - loader - D

npm install html - webpack - plugin - D

六、初始化配置文件

npm init -y

{

"name": "mf_app",

"version": "1.0.0",

"main": "cyberwin_apploader.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC",

"description": "",

"dependencies": {

"-": "^0.0.1",

"css": "^3.0.0",

"D": "^1.0.0",

"file": "^0.2.2",

"html": "^1.0.0",

"loader": "^2.1.1",

"plugin": "^0.3.3",

"style": "^0.0.3",

"url": "^0.11.4",

"webpack": "^5.97.1"

}

}

七、执行准备

项目目录下,新建config文件夹,用于存放配置文件;src文件夹,用于存放源码;out文件夹,用于存放打包生成文

八、配置文件

const path=require('path'); //调用node.js中的路径

module.exports={

entry:{

index:'./src/js/index.js' //需要打包的文件

},

output:{

filename:'[name].js', //输入的文件名是什么,生成的文件名也是什么

path:path.resolve(__dirname,'../out') //指定生成的文件目录

},

mode:"development" //开发模式,没有对js等文件压缩,默认生成的是压缩文件

}

九、执行命令

webpack --config config/webpack.config.js

相关推荐
快手技术1 天前
兼顾效率和性能!快手低代码平台在大型活动中的技术实践!
前端
WebInfra1 天前
📱开源 AI 工具驱动 iOS 自动化 、接入全新 Qwen 模型 - Midscene v0.29 发布
前端·ios·测试
乖女子@@@1 天前
React-props的children属性
前端·javascript·react.js
OEC小胖胖1 天前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
八月十八1 天前
React常用Hooks及使用示例大全
前端·javascript·react.js
狼爷1 天前
前端项目从 Windows 到 Linux:构建失败的陷阱
前端·node.js·angular.js
1024小神1 天前
vitepress多语言实现第一次跟随浏览器,第二次不跟随
前端
叫我詹躲躲1 天前
🚀 震撼!10道DFS&BFS神级题目让你的算法能力飙升300%
前端·leetcode
ssshooter1 天前
WebGL 切换 Shader 的策略
前端·webgl
WDyinh1 天前
积分球领取补位动画实现
前端·javascript