webpack打包后CSS样式没有引用进来

发布于 2022-09-11 15:37:52 字数 2620 浏览 14 评论 0

我的项目目录结构

.
├── dist
│   ├── index.html
│   └── main.bundle.js
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── main.js
└── webpack.config.js

src 目录下的 index.html 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Webpack DEMO</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1 class="title">Webpack DEMO</h1>

  <script src="./js/main.js"></script>
</body>
</html>

src 目录下的 style.css 文件

*{margin:0;padding:0;}
html, body {
  height:100%;
}
body {
  background-color:#000;
}
.title {
  display:inline-block;
  margin:30px;
  line-height:1.5;
  font-size:36px;
  color:#FFF;
}

webpack.config.js 文件内容如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry:'./src/js/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'style-loader',
           'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename: './dist/[name].[hash].css'
    })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    hot: true,
    inline:true
  },
};

打包后生成 dist 目录下的 index.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.bundle.js?66b744cd3fcfe1839a99"></script></body>
</html>

打包后为什么原来的页面里引用的样式不见了呢？

我想要的效果是每次打包后像 JS 脚本一样，样式自动引入进来并且带上 hash ，该如何实现呢？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最美的太阳 2022-09-18 15:37:52

loader类似管道运算，每一个loader执行特定的任务并提供输入输出。
按照你提共的代码，loder的执行顺序：css-loader --> style-loader --> MiniCssExtractPlugin.loader。

css-loader：在js代码中使用import和require来导入css文件，如果css文件中包含@import和url()这两个语句就需要css-loader来处理，输出解析结果。

style-loader：将输入结果创建styledom元素，创建dom的代码会打包在js bundle里。

MiniCssExtractPlugin.loader：将输入结果分离为css文件，并压缩。

可以这样理解style-loader和MiniCssExtractPlugin.loader只接收上一个loader提供的输入，但不为下一个loader提供输出。所以style-loader执行完后，MiniCssExtractPlugin.loader不会分离并压缩css文件。

在开发模式时使用style-loader，生产环境时使用 MiniCssExtractPlugin.loader分离css文件。

下面是对webpack.conf.js进行的修改：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 导出函数
module.exports = (env, arg) => {
  // 判断是否是开发模式
  const devMode = argv.mode === 'development';

  let config = {
    entry:'./src/js/main.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
        {
            test:/\.css$/,
            use: [
            {
                loader: devMode ? 'style-loader': MiniCssExtractPlugin.loader
            },
            'css-loader'
            ]
        }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist'),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
        hash: true
        }),
        new MiniCssExtractPlugin({
          filename: devMode ? '[name].css' : '[name].[hash].css',
          chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),
        hot: true,
        inline:true
    }
  }

  return config
};

回复收藏 0

~没有更多了~