webpack 打包样式资源

￡神魔★判官ぃ 2023-01-09 01:10 105阅读 0赞

# webpack 打包样式资源 #

`webpack.config.js`配置文件内容为：

// 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    
    
    module.exports = {
        
        // webpack 配置
    
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                // 详细 loader 配置
                // 不同文件必须配置不同 loader 处理
                {
        
                    test : /\.css$/, // 匹配哪些文件
                    //使用哪些 loader 进行处理
                    use: [ 
                        // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                        'style-loader', // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
                        'css-loader' // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
                    ]
                },
                {
        
                    test : /\.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader'   // 将less文件编译成css文件,需要下载 less-loader 和 less
                    ]
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack打包静态资源之图片篇

文章目录 * 占位符 * 更改输出目录 * url-loader 占位符我们知道，在打包图片的时候，名字是被`file-loader`重新命名过...

蔚落/ 2024年04月17日 06:03/ 0 赞/ 19 阅读

相关 webpack 打包图片资源

webpack 打包图片资源 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入 3.使用

野性酷女/ 2023年01月09日 03:54/ 0 赞/ 141 阅读

相关 webpack 打包样式资源

webpack 打包样式资源 `webpack.config.js`配置文件内容为： // 用来拼接绝对路径的方法 const { re

￡神魔★判官ぃ/ 2023年01月09日 01:10/ 0 赞/ 106 阅读

相关 Webpack基本配置--打包资源

webpack打包资源笔记一、Webpack简介 1.1webpack是什么 Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来

浅浅的花香味﹌/ 2022年12月31日 01:19/ 0 赞/ 215 阅读

相关 Webpack 打包其他资源(详解)

打包其他资源需要安装的 > npm install --save-dev html-webpack-plugin 处理html > npm i url-loade

分手后的思念是犯贱/ 2022年10月06日 00:35/ 0 赞/ 175 阅读

相关 webpack核心概念_（第三章）_使用Loader打包静态资源（样式篇-上）

Loader打包样式当我们在src下写一个样式文件，并在index.js中引入使用该文件的样式，运行发现出错 import './index.css'

深碍√TFBOYSˉ_/ 2022年10月03日 00:43/ 0 赞/ 122 阅读

相关 webpack打包图片资源说明

npm run build打包后，一些图是转为base64了，一些是在static/img文件夹。路径问题： 1、直接<img :src=''>引用修改方法：首先修改

亦凉/ 2022年06月01日 02:07/ 0 赞/ 236 阅读

相关利用webpack打包其它资源文件

文章目录打包sass文件项目结构修改源码运行结果打包less文件修改源码运行结

r囧r小猫/ 2022年04月18日 06:31/ 0 赞/ 229 阅读

相关 webpack4 打包样式文件

1、添加loader (1)下载对应loader包 (2)下载后,使用时要注意顺序 style-loader, 创建style标签,将j

￡神魔★判官ぃ/ 2021年07月24日 17:58/ 0 赞/ 359 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 471 阅读