之前写了一个简单工程的打包：
打包一个简单的工程
现在在这个基础上调整一下文件的结构，加入css后一起打包。
之前的文件结构：
现在把index.html放入src中，并把js文件放入js文件夹，css文件放入css文件夹，然后打包整个src文件。
common.css
* {margin: 0;padding: 0;border: none;}body {background: lightblue;}
index.css
@import './common.css';.box {width: 100px;height: 100px;background: orange;margin: 50px auto;}
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 需要在入口文件里导入 --><!-- <link rel="stylesheet" href="index.css"> --><title>Document</title></head><body><div id="app"><div class="box">hello</div></div><!-- 在webpack.config.js中配置了入口文件就是index.js --><!-- <script src="index.js"></script> --></body></html>
一、由于要把html和css文件都打包，所以要安装几个工具：
1.html：html-webpack-plugin
2.css:：css-loader和style-loader
npm install --save-dev html-webpack-pluginnpm install --save-dev css-loader style-loader
二、配置webpack.config.js文件（注意html插件的引入和配置时变量不要写错）
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'production', // 生产模式entry: "./src/js/index.js", // 入口路径output: {// 出口路径path: path.resolve(__dirname, 'dist'),// [hash]让每一次生成的文件都带上HASH值filename: 'bundle.min.[hash].js'},target: "web",devServer: {port: 3000, // 端口号progress: true, // 显示打包编译的进度contentBase: './dist', // 指定当前服务处理资源的目录open: true // 编译完成会自动打开浏览器},// 使用插件plugins: [new HtmlWebpackPlugin({// 指定要编译的文件，不指定的话会按照默认的模板创建一个htmltemplate: './src/index.html',// 编译完成输出的文件名filename: 'index.html',// 给引入的文件通过问号传参设置HASH戳（清除缓存的），但是真实项目我们一般都是每一次编译生成不同的JS文件引入，详见上面的出口路径设置// hash: true,// 控制压缩minify: {collapseWhitespace: true, // 干掉空格removeComments: true, // 干掉注释removeAttributeQuotes: true, // 干掉双引号removeEmptyAttributes: true // 干掉空属性}})],// 使用loader加载器来处理规则module: {rules: [{// 基于正则匹配处理哪些文件test: /\.(css)$/i, // 控制使用哪个加载器loader（有顺序的：数组从右到左执行）use: ["style-loader", // 把编译好的css插入到页面的HEAD中（内嵌式样式）"css-loader" // 编译@import/url()这种语法的]}]}};
三、在入口文件里引入需要css文件
由于入口路径写的是index.js，所以css文件需要在index.js文件中导入。
index.js
// ES6Module规范（引入必须放在第一行）import {es6ModuleFn} from './nav';// CommonJS规范let {commonFn} = require('./common');import '../css/index.css'// 或 require('../css/index.css')es6ModuleFn();commonFn();
四、运行webpack
npm run build
打开网页：
![[2024年]包容的重要性与实践：探讨包容的作文](https://1500zi.500zi.com/uploadfile/img/2024/05/23/d57dd9a67fd3ab859dd584649d91fcaa.jpg)
![[2024年]探讨学习PHP的心得体会及写作技巧](https://1500zi.500zi.com/uploadfile/img/2024/05/22/7491ae9ebdd69dd7cf7ea137c70286ce.jpg)
