• 项目目录

    image.png

    • 配置plugin（mini-css-extract-plugin）

      1. npm install --save-dev mini-css-extract-plugin

    • 配置文件 ```javascript const { resolve } = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

    module.exports = { entry: ‘./src/js/index.js’, output: { filename: ‘js/built.js’, path: resolve(__dirname, ‘build’) }, module: { rules: [ { test: /.css$/, use: [ // 创建style标签，将样式放入 // ‘style-loader’, // 这个loader取代style-loader。作用：提取js中的css成单独文件 MiniCssExtractPlugin.loader, // 将css文件整合到js文件中 ‘css-loader’ ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html’ }), new MiniCssExtractPlugin({ // 对输出的css文件进行重命名 filename: ‘css/built.css’ }) ], mode: ‘development’ }; ```

    • 运行指令：webpack