美文网首页
02-webpack打包样式

02-webpack打包样式

作者: 0说 | 来源:发表于2021-08-10 23:31 被阅读0次

    文件目录


    image.png

    css文件

    html,body {
        height: 100%;
        background-color: pink;
        margin: 0;
        padding: 0;
    }
    

    less文件

    #title {
        background-color: red;
    }
    

    js文件

    import './index.css';
    

    webpack.config

    /*
    webpack.config.js  webpack 配置文件 
    作用:指示webpack 干哪里活(当你运行时 webpack会加载里面的配置)
    */ 
    const { resolve } = require('path')
    module.exports = {
        // webpack 配置
        // 入口文件
        entry: './src/index.js',
        // 输出文件
        output: {
            // 输出文件名
            filename: 'build.js',
            // 输出路径
            // __dirname 表示当前的绝对路径 第二个是哪个文件
            path: resolve(__dirname,"build")
        },
        // loader 配置
        module: {
            rules: [
                // 详情的loader配置
                {
                    // 匹配全部css样式文件
                    test: /\.css$/,
                    // 使用哪里css loader 进行处理
                    use: [ // use执行顺序 从右到左 从下到上
                        // 作用是 创建style标签 将js里的样式添加到head中生效
                        "style-loader",
                        // 作用是 将css文件转化成commonjs模块加载js中,里面的内容是字符串
                        "css-loader"
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        // 装less文件编译成css样式 要安装 less 跟less-loader
                        "less-loader"
                    ]
                }
            ]
        },
        // 插件配置
        plugins: [],
        mode: 'development'
    }
    

    运行 webpack 会加载webpack.config.js文件生成build里的build.js文件
    html文件

    <!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>
    </head>
    <body>
        <script src="./build.js"></script>
    </body>
    </html>
    
    image.png
    image.png

    相关文章

      网友评论

          本文标题:02-webpack打包样式

          本文链接:https://www.haomeiwen.com/subject/kzqqbltx.html