{//处理图片资源test:/\.(jpg|png|gif)$/,loader:'file-loader',options:{ //关闭es6模块化 esModule:false, limit:20*1024, name:'[hash:10].[ext]',

1、安装webpack失败问题错误原因：这主要是我以普通用户的身份进行webpack的全局安装，权限不够。【普通用户】说白了就是通过运行window+r+cmd进入的命令行解决方式：用管理员权限打开命令行然后输入cnpminstallwebpack-g即可 2、webpack运行错误问题要么是代码出了错

1.增加webpack-dev-serverdevServer: {    contentBase: path.resolve(__dirname, "build"),    host: "localhost",    port: 8000,    compress: true,  },2.cssinjs(插入到header部分)style-loader3.cssseaprate()new MiniCssEx

webpack打包vue项目webpack介绍一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，一级代码压缩混淆，处理js兼容问题、性能优化等强大的功能，从而让程序员把工作重心放到具体的功能实现上，提高了开发效率和项目的可维护

上一记介绍了webpack的安装和基本配置，本记将描述webpack自身的配置一：指定webpack入口以及出口目录以及输出文件相信读者在看完上一记后会有一点疑惑：为什么运行webpack要配置src，为什么会有构建打包文件时会生成dist目录且里面会有一个main.js呢？—mydemo______dist—————

day0527昨日回顾websocket全双工即时通信问题在线客服它也是基于http协议，在第1次时候，把http进行升级-》握手发起websocket请求->http请求头发送过去版本key加密所用服务器端—接受key+guid=>sha1=>base64=>响应头传给客户端开发工具webstromw

1、安装vue3脚手架搭建一个基于vue-cli3的项目框架下载vue-cli官方文档：https://www.vue3js.cn/docs/zh/guide/installation.html#npmyarnglobaladd@vue/cli@next#ORnpminstall-g@vue/cli@next运行以下命令来创建一个新项目vuecreatevue3-demo创建好后 会要

出错现象这个错误是在我安装了webpack-dev-server之后打包运行时出现的出错原因webpack-cli和webpack-dev-server不兼容版本：webpack——————————"5.38.1"webpack-cli——————————"4.1.0"webpack-dev-server—————————"3.11.2"解决方

五大部分Entry：程序入口文件，webpack通过以入口文件为起点，解析所需的依赖包进行打包，一般为index.jsOutputLoader：默认webpack只能打包javascript和json文件，如果要打包css和img等静态资源文件，需要loader，loader将资源文件转为javascript代码，交给webpack打包，loader与loader之间是链式

何为插件(Plugin)？专注处理webpack在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。1

1.需要暴露出webpack的配置文件在中端运行npmruneject 2.安装less和less-loader插件运行npminstallless-loaderless--save 3.修改webpack的配置文件找到config文件夹目录下的webpack.config.js。添加一下代码constlessRegex=/\.less$/;constlessModuleReg

前言这里总结一下，自己在学习webpack时，比较疑惑的地方1、什么是webpack?webpack是前端模块化打包工具，它把一切都看成模块，比如css、js、图片文件等都可以看成模块，再通过一些loader（加载器）和plugin（插件）对资源进行处理，打包成符合生产环境的前端资源。2、为什么需要webpack?多模块

loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。1.加载sccstyle-loader、css-loader、less-loader和sass-loader（文件打包解析cssl

1、背景随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的webpack的构建时间也会越来越久构建时间与我们日常开发效率密切相关，当我们本地开发启动devServer或者build的时候，如果时间过长，会大大降低我们的工作效率所以，优化webpack构建速度是十分重要的

1.Webpack中css文件的配置webpack可以实现基本的js代码的处理，但是对于加载css，图片，或者将高级的ES6转成ES5代码等操作，还需要给webpack扩展对应的loaderloader的使用过程①通过npm安装需要使用的loadernpminstall--save-devcss-loader@2.0.2npminstall--save-devsty

1、Webpack的PluginPlugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据webpack中的plugin也是如此，plugin赋予其各种灵活