webpackstudy/03/webpack.config.js

/**
 * 所有构建工具都是基于node环境，模块化默认采用common.js
 */
const {resolve}  = require('path');
/*common.js */
module.exports = {
    // webpack配置
    // 入口
    entry: './src/index.js',

    // 输出
    output: {
        filename: 'built.js',
        // __dirname 当前文件夹
        path: resolve(__dirname,'build')
    },
    // loader配置 css-loader
    // 不同文件配置不同loader处理
    module:{
        rules:[
            {
                // 匹配哪些文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use: [
                    // 执行顺序：从右到左，从下到上
                    'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中
                    'css-loader'  // 将css文件变成commonjs模块加载js中，里面内容时样式字符串
                ]
            },
            {
                // 匹配哪些文件
                test:/\.less$/,
                //使用哪些loader进行处理
                use: [
                    // 执行顺序：从右到左，从下到上
                    'style-loader',
                    'css-loader',
                    'less-loader' // 将less文件编译成css文件, 依赖less
                ]
            }
        ]
    },
    // plugins配置
    plugins:[

    ],
    // 开发模式 生产模式production
    mode: 'development'
}