Webpack 打包静态资源 css文件

项目安装css-loader和style-loader

npm i -D css-loader style-loader

前者负责解析css文件,后者负责将解析好的css挂载到页面的head > style

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">Hello,World!</div>
    <script src="./bundle.js"></script>
</body>
</html>

index.js 一行代码导入

import style from './style.css'

webpack.config.js

const path = require('path')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                    'style-loader',
                    'css-loader'
                ]
        }]
    }
}
posted @ 2020-11-07 16:14  Toream学习笔记  阅读(187)  评论(0)    收藏  举报