02-webpack打包样式文件

最新推荐文章于 2022-06-10 14:15:09 发布

过客尘烟

最新推荐文章于 2022-06-10 14:15:09 发布

阅读量1.1k

点赞数

分类专栏： Webpack学习文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_41309350/article/details/122681553

版权

Webpack学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在实际开发中我们要避免二次请求静态资源，避免浪费。所以，要学会使用webpack打包样式文件
在这里插入图片描述
(1)首先初始化 package.json 输入指令: npm init
下载并安装 webpack 输入指令: npm install webpack webpack-cli -g npm install webpack webpack-cli -D

(2)下载安装 loader 包 npm i css-loader style-loader less-loader less -D

在终端输出

  webpack src/js/main.js -o build/js/built.js --mode=development

webpack.config.js

const path=require('path')
module.exports={
    entry: path.join(__dirname,'./src/main.js'),
       //入口，表示使用webpack打包哪个文件
    output:{ //输出文件相关的配置
        path:path.join(__dirname,'./dist'),//把文件打包到哪个目录去
        filename:'bundle.js' //指定输出的文件的名字
    },

    module:{//这个节点，用于配置所有的第三方模块加载器
        rules:[ //所有第三方模块的规则
            {test:/\.css$/,use:['style-loader','css-loader']},
            { test: /\.less$/,use: ['style-loader','css-loader',
                  // 将less文件编译成css文件
                  // 需要下载 less-loader和less
                  'less-loader'
                ]
              }
        ]
    },
    mode:'development'//开发模型
}

main.js

import './index.css';
import './index.less';

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/bundle.js"></script>
</head>
<body>
    <h1 id="t">我是谁</h1>
</body>
</html>

在这里插入图片描述

过客尘烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-webpack打包样式文件

在实际开发中我们要避免二次请求静态资源，避免浪费。所以，要学会使用webpack打包样式文件(1)首先初始化 package.json 输入指令: npm init下载并安装 webpack 输入指令: npm install webpack webpack-cli -g npm install webpack webpack-cli -D(2)下载安装 loader 包 npm i css-loader style-loader less-loader less -D在终端输出 webpac
复制链接

扫一扫

专栏目录