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.测试效果

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

 

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

上一篇::8020/layui/layui_ext/json/case/asyncTree1.json:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)


下一篇:订单超时、活动过期解决方案:php监听redis key失效触发回调事件