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

在终端输出

  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>

在这里插入图片描述

02-webpack打包样式文件

猜你喜欢