webpack学习笔记 02 webpack配置文件css

自定义入口和出口文件

通过指令自定义

npx webpack --entry ./src/main.js --output-path ./build

在package.json中配置好，执行npm run build

单独建立一个webpack配置文件

//node内置模块，用于处理路径问题
const path = require('path');

module.exports = {
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        //获取当前文件的绝对路径
        path:path.resolve(__dirname, "./build")
    }
}

注：入口文件可以是相对路径，但是出口文件必须是绝对路径

指定配置文件的名字

例如：把之前的webpack.config.json改名为wk.config,.js或是放到其他文件夹，但还想配置文件生效就需要进行新的配置

Css文件的模块化

直接打包引入的css文件是会报错的，需要一个loader来加载css文件

css-loader的使用方案

方法1：内联式

在需要使用loader的文件路径前加上对应的loader，并用 ！进行分割，支持多个loader，且loader间用感叹号分割

loader配置

注：loader解析顺序是从后往前的

 module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                   // { loader: "css-loader" },
                    "style-loader",
                    "css-loader"
                    //因为解析loader时是从下往上的，所以要把css-loader写在style-loader的下面，从而被先解析
                ],
                //loader: "css-loader"
            }
        ]
    }

style-loader做的事情无非就是在页面创建一个style标签，再把css样式放入标签内

这篇好文章是转载于：学新通技术网