Webpack打包html和css、less、sass文件

最新推荐文章于 2024-07-24 13:52:24 发布
最新推荐文章于 2024-07-24 13:52:24 发布
阅读量739 收藏
点赞数
文章标签： css webpack html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43235503/article/details/128209070
版权

打包html文件:

安装html-webpack-plugin模块

npm install html-webpack-plugin --save-dev

webpack.config.js配置文件：

打包单个html文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
            collapseWhitespace: true, //清除空格
            removeAttributeQuotes: true, //清除多余引号
            removeComments: true //删除注释
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      }
    ),
  ],
};

 打包多个html文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
            collapseWhitespace: true, //清除空格
            removeAttributeQuotes: true, //清除多余引号
            removeComments: true //删除注释
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      },
       {
        minify: {
            collapseWhitespace: true, //清除空格
            removeAttributeQuotes: true, //清除多余引号
            removeComments: true //删除注释
        },
        template: path.resolve(__dirname, "./src/index2.html"),
        filename: "index2.html",
      }
    ),
  ],
};

 使用npm run dev来打包启动项目

打包css文件:

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }
    ],
  },
};

使用npm run dev来打包启动项目

打包less文件：

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

安装less-loader和less模块

npm install less-loader less --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      }
    ],
  },
};

使用npm run dev来打包启动项目

打包sass文件

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

安装sass-loader和node-sass模块

npm install sass-loader node-sass --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

使用npm run dev来打包启动项目

同时打包html和css、less、sass文件

安装html-webpack-plugin模块

npm install html-webpack-plugin --save-dev

 安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

 安装less-loader和less模块

npm install less-loader less --save-dev

 安装sass-loader和node-sass模块

npm install sass-loader node-sass --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: "./src",
    open: true,
    hot: true,
    hot: true,
    port: "3301",
    host: "127.0.0.1",
  },
  plugins: [
    new htmlWebpackPlugin(
      {
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        template: path.resolve(__dirname, "./src/index.html"),
        filename: "index.html",
      },
      {
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
        template: path.resolve(__dirname, "./src/index2.html"),
        filename: "index2.html",
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

使用npm run dev来打包启动项目

前端小凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端知识11：webpack 打包less或者sass资源
weixin_41380194的博客
01-10 398
因为css知识单纯的属性描述 它并不具有变量 条件语句等。css的特性导致了它难组织和维护。 sass和less都属于css的预处理器。定义了一种新的语言。其基本思想是用另外一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用这种语言进行css编码工作 less需要使用npm下载less-loader包 这个包将less编译为css sass需要使用npm下载sass-loader包 这个包将sass编译为css less-loader举例： html: box2 i
webpack热更新，打包html、css、less、sass
CQcaoqian的博客
06-21 220
一、创建文件夹目录src1、src/index.html
2. webpack 处理 css less sass scss styl 资源
李嘉城的博客
10-31 901
webpack 本身是不能识别样式资源的，所以我们需要借助 loader 来解析样式资源我们可以去官方文档中找到对应的 loader，并且查看配置指南webpack 官方 Loader 文档。
webpack安装sass
qq_34631220的博客
06-22 254
这个不用webpack.config.js。package.json文件。
webpack怎么打包less文件为css
Billow_lamb的博客
03-03 546
webpack怎么打包less文件 下载插件 (webpack4.0以后的打包css文件) npm i mini-css-extract-plugin -D 引入 const Minicss = require("mini-css-extract-plugin") 写入 const css = new Minicss({ // 输出css独立文件 filename: "./css/[name].css", chunkFilename: "[name].css" // 或者id }) 在mo
记录：webpack打包css,less,sass
qq_15064263的博客
03-22 217
index文件 在js文件内require css文件 style.css 文件 webpack.config.js 配置 const { resolve } = require("path"); // 应用打包html插件 const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", // entry为对象时，配合以下output 会成成多个打包
webpack打包js，json，webpack打包css、less、sass、scss
前端小白的逆袭
11-23 343
webpack打包js，json，webpack打包样式，wepack打包less，webpack打包sass，webpack打包scss
webpack处理样式资源（css less sass scss）
jieyucx的博客
06-07 1473
本身是不能识别样式资源的，所以我们需要借助Loader来帮助解析样式资源。
webpack 如何编译css、less文件
weixin_42123213的博客
12-29 240
webpack 如何编译.css、.less、.sass **loader的编译顺序是从右往左，从上往下。**使用样式的话，css-loader和style-loader是必须的依赖包。 css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能； style-loader将所有的计算后的样式加入页面中； 二者组合可以把样式表嵌入webpack打包后的JS文件中。 1.编译.css文件需要安装 style-loader、css-loader。 {
webpack处理 css\less\sass 样式的方法
08-29
本篇文章主要介绍了webpack处理 csslesssass 样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯html+javascript+css webpack打包的项目
04-12
本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理和打包，使得项目结构清晰，易于理解和维护。以下是关于这个项目及其相关技术的详细说明： **HTML** HTML（HyperText Markup Language）是网页内容...
学习CSS预处理器:Sass和less进行对比
09-25
Sass和Less是目前最广泛使用的两种CSS预处理器，各有其特点和优势。 Sass和Less都是用来编写更高效、可维护的CSS代码的语言。它们允许开发者定义变量，存储常用颜色、字体或尺寸；使用嵌套规则简化复杂的CSS结构；...
webpack的Sassloader用于将Sass编译成CSS
08-08
Webpack是现代前端开发中广泛应用的模块打包工具，它允许开发者将JavaScript、HTML、CSS以及其他资源文件组织成模块，然后进行高效地打包。在处理CSS及其预处理器如Sass时，Webpack提供了一系列的加载器（Loader），...
网站基本布局CSS
m0_46608027的博客
07-24 820
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
最新发布
贵林之恋的博客
07-24 311
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
CSS 创建：从入门到精通
wjs2024的博客
07-24 389
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 307
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
CSS实现表格无限轮播
像鱼的博客
07-24 224
在React中，用CSS实现表格无线轮播
webpack打包没有输出css文件夹
06-08
如果Webpack打包时没有输出CSS文件夹，可能是因为没有正确配置Webpack的CSS loader和Plugin。可以尝试以下几种方法： 1. 确认webpack.config.js中的module.rules中是否有针对CSS文件的loader配置。例如： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值