Webpack——使用webpack打包样式资源

使用webpack打包样式资源

一、在项目根目录创建一个webpack配置文件

webpack.config.js

/**
 * webpack.config.js webpack的配置文件
 *  用来指示webpack干哪些活。（当我们运行webpack指令时，会加载该配置文件）
 *  所有的构建工具都是基于nodejs平台运行，模块化默认基于CommonJs
 */

// resolve用来拼接绝对路径
const { resolve } = require('path');
module.exports = {
    // 模式：development|production：开发|生产模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',

    // 输出文件
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        path: resolve(__dirname, 'build'),
    },

    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            // 不同资源使用不同的loader
            {
                // 表示匹配哪些文件，这里表示匹配以.css结尾的文件
                test: /\.css$/,
                // 表示使用哪些loader进行处理
                use: [
                    // 这里用到了这两个loader，所以需要下载 cnpm i css-loader style-loader -D
                    // use中的执行顺序，从右到左，从下到上
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成CommonJs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    // 这里用到了这三个loader，所以需要下载 cnpm i css-loader style-loader less less-loader -D
                    // use中的执行顺序，从右到左，从下到上
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成CommonJs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                    // 将less文件转化为css
                    'less-loader',
                ]
            }
        ],
    },

    // plugins的配置
    plugins: [
        // 详细插件的配置
    ],
}

二、创建入口文件index.js，以及样式文件

index.js

/**
 * index.js webpack打包的入口起点文件
 * 
 * 运行指令：
 *  开发环境：webpack ./src/index.js -o ./build --mode=development
 *      开发环境：入口文件为./src/index.js 打包到./build文件夹下main.js文件中
 *  生产环境：webpack ./src/index.js -o ./build --mode=production
 * 
 * 结论：
 *  1.webpack可以打包js/json文件
 *  2.webpack不能打包css/img等文件
 */
import './css/index.css';
import './css/index.less';
function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

index.css

html, body {
    background-color: pink;
}

index.less

body {
    .className {
        background-color: deeppink;
    }
}

三、打包

命令行输入：webpack

在index.html中引入打包生成的js文件

成功！！！