webpack和npm

一、npm包管理文件

  安装命令:npm init -y

二、创建webpack.config.js配置文件

  entry      //入口文件

  moudle  //loader打包css、less、图片资源等等

  plugins  //插件打包html

  output   //输出

  mode    //模式 development开发模式 production生产模式

三、安装webpack、webpack-cli

    安装命令:npm i webpack webpack-cli -D

四、安装一些常用的包

  打包HTML

    安装命令:npm i html-webpack-plugin -D

  打包CSS

    style-loader将模块导出的内容作为样式并添加到 DOM 中

    安装命令:npm install --save-dev style-loader

    css-loader加载 CSS 文件并解析 import 的 CSS 文件,最终返回 CSS 代码

    安装命令:npm install --save-dev css-loader

  实现自动刷新webpack-dev-server

    webpack-dev-server就是一个小型的nodejs的服务器

    安装命令:npm install --save-dev webpack-dev-server

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index:'./src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', }, module: { rules: [{ test: /\.css$/, use: ['style-loader','css-loader'] , }], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' , filename:'index.html', chunks:['index'], minify:{ collapseWhitespace:true, //去空格 removeComments:true //去除注释 } }) ], mode:'development' };

 


__EOF__

本文作者GTK
本文链接https://www.cnblogs.com/DnmyCourage/p/15147189.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   GTK  阅读(256)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示