首页 > 其他分享 >Webpack 初始化

Webpack 初始化

时间:2024-10-07 22:11:22浏览次数:7  
标签:npm 初始化 -- webpack dev loader Webpack install

1、初始化npm项目 npm init -y 得到 package.json

2、安装 webpack,webpack-cli相关 npm install webpack webpack-cli --dev

node_modules .bin目录有webpack相关

 即可通过npm 运行 webpack命令

如: npm webpack --version

 可直接执行 webpack命令进行打包

也可这么着:

 webpack默认src/index.js 打包到 dist/main.js

若自定义的话,需在项目的根目录下,创建webpack.config.js文件里面的代码需按common.js的格式来编写代码,因为它是被node环境执行。

 指定打包模式: 

 production development none

webpack 资源模块加载

npm install css-loader --dev

 webpack.config.js 中添加 rules

 npm install style-loader --dev

 use数组里是从后往前执行的,所以需要先要css-loader 编译,再用style-loader 引用。

npm install file-loader --dev

publicPath: 配置网站的根目录

npm install url-loader --dev

npm install babel-loader @babel/core @babel/preset-env --dev

HTML loader
npm install html-loader --dev

 配置触发 webpack loader的属性。

自动清理输出目录:

npm install clean-webpack-plugin --dev

 

通过webpack输出HTML文件
npm install html-webpack-plugin --dev

 

 lodash语法:


自动编译:
watch模式


npm install webpack-dev-server --dev

 

标签:npm,初始化,--,webpack,dev,loader,Webpack,install
From: https://www.cnblogs.com/hotMemo/p/18449527

相关文章

  • Autosar EcuM配置-初始化及下电执行函数-基于ETAS软件
    文章目录前言EcuMCommonConfigurationEcuMDriverInitListOneEcuMModuleIDEcuMModuleParameterEcuMModuleServiceEcuMRbDriverInitCoreIdEcuMDriverInitListZeroEcuMGeneralEcuMRbOnGoOffOneCalloutEcuMRbCalloutFunctionEcuMRbModuleIDEcuMRb......
  • 使用鼠标点击矩阵上下左右的数字初始化为1 计算所需总共点击次数矩阵所有数字变成1的
    1importjava.util.ArrayList;23publicclassHuaweiTest2{4publicstaticvoidmain(String[]args){5//System.out.println("HelloWorld!");6}78publicstaticIntegergetMilliSecondsForInputInicialize......
  • 二维数组的创建和初始化
    1.二维数组的概念按我的理解,其实二数组就是有多个一维数组组成的,多个二维数组作为元素,那就是三维数组,多个三维数组就是多维数组。2.二维数组的创建1.type arr_name[常量值1 ][常量值2 ]={};2.例如:3.intarr[3][6];4.doubledata[4][6];1.type代表类型2.arr表示数......
  • 【Webpack--016】config文件include和exclude配置
    ......
  • 多线程下单例模式延迟初始化的实现
    多线程下单例模式延迟初始化的实现前言synchronized修饰方法双重检查锁定双重检查锁定的问题基于volatile的双重锁定方案类初始化总结前言在程序开发中,存在一些开销较高的资源,例如数据库连接等,我们使用单例模式保证其唯一并且进行延迟初始化,只有当使用的时候才进行......
  • 构造函数初始化列表 的好处
    初始化类成员的两种方式:(1)使用初始化列表;(2)在构造函数体内进行赋值操作。classPoint{public:Point(intxx,intyy):x(xx),y(yy){cout<<"ConstructorofPoint"<<endl;}private:floatx,y;};class......
  • 实战笔记:Vue2项目Webpack 3升级到Webpack 4的实操指南
    在Web开发领域,保持技术的更新是非常重要的。随着前端构建工具的快速发展,Webpack已经更新到5.x版本,如果你正在使用Vue2项目,并且还在使用Webpack3,那么是时候考虑升级一下Webpack了。我最近将我的Vue2项目从Webpack3升级到了Webpack4。以下是我升级过程中积累的经验和步骤,希望......
  • 初始化的代码块和@PostConstruct有什么区别
    背景    在实际开发中,我们经常会需要进行一些初始化操作,比如进行一些预加载和赋值之类的。在代码中,常见的有通过静态代码块、非静态代码块,@PostConstruct来实现初始化。那么既然他们都可以实现初始化操作,那么他们有什么区别呢?使用方式静态代码块:是用 static 关键......
  • 前端使用webpack本地实现编译时出现错误[cached] 1 asset ERROR in main Module not
    一:概述Webpack是一个现代JavaScript应用程序的静态模块打包工具。它主要用于将JavaScript代码、CSS、图片等资源模块化管理,并最终打包成一个或多个文件,方便在浏览器中使用。以下是对Webpack的详细介绍:主要特点模块化:Webpack支持ES6模块、CommonJS和AMD模块,能够将各种......
  • 信息学奥赛复赛复习04-CSP-J2019-04-加工零件-位运算、整数映射0或1、结构体、初始化
    PDF文档回复:20240926<12019CSP-J题目4加工零件[题目描述]凯凯的工厂正在有条不紊地生产一种神奇的零件,神奇的零件的生产过程自然也很神奇。工厂里有n位工人,工人们从1∼n编号。某些工人之间存在双向的零件传送带。保证每两名工人之间最多只存在一条传送带如果......