webpack学习02--打包样式资源

1.使用npm下载loader

npm i style-loader -D
npm i css-loader -D
npm i less -D
npm i less-loader -D

2.配置webpack.config.js文件

/*
    webpack配置文件，作用：指示webpack怎么干活，干哪些活
    当你运行webpack指令的时候，会加载其中的配置
    所有的构建工具都是基于Node.js来运行的，模块化使用的CommonJS
 */

const {resolve} = require('path')

module.exports = {
    // webpack配置
    // 入口起点
    entry : './src/index.js',
    // 输出
    output :{
       filename : 'build.js',
       path : resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件(正则表达式)
                //以css结尾
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[//use数组中的执行顺序，是从后到前(从右到左)
                    //创建一个style标签，将js中css样式资源插入进去，添加到页面的head中生效
                    'style-loader',

                    //将css文件变成commonjs的模块，加载到js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //需要下载less-loader和less
                    'less-loader'
                ]
            }
        ]
    },
    //插件的配置
    plugins:[

    ],
    //模式
    mode:'development'
    //mdde:'production'
}

3.创建css和less文件

index.css

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

index.less

#title{
  color:#fff;
}

4.创建入口文件index.js

import './index.css'

import './index.less'

5.执行webpack命令打包

webpack

6.建立html文件测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./build.js"></script>
</head>
<body>
<h1 id="title">hello</h1>
</body>
</html>

7.测试效果

posted on 2021-02-15 10:59 Sempron2800+ 阅读(78) 评论(0) 编辑收藏举报