这几天学习了webpack打包工具，一开始有着与大多数初学者一样的感受：“看不懂这个是在干什么”。这么说或许还是不确切，应该是看懂了在干什么，却不知道为什么要这样做，用这个函数是在干嘛。虽然老师讲的很好，自己听的头头是道，而到了自己尝试这用工具打包时却是摸不着头绪，一头雾水。今天在这里我做出了一些心得总结。
给大家看一下我准备的打包文件，我这里用的是将三个文件加一张图片都放在./src/...的路径底下。
运行出来的效果也是如下图的一个时钟。只用了最基础的一些CSS和JS代码，主要为了练习webpack打包。
1. Webpack打包JS文件****
为什么第一个讲打包JS呢，因为Webpack这个工具就是建立在JS的基础上的，所以打包JS文件也是最简单的。 当我们有着一个准备打包的JS文件时：
首先：
确保你已经安装了webpack和webpack-cli。如果还没有安装，可以通过以下命令安装：
npm i webpack webpack-cli --save-dev
第二步：
在项目的根目录下创建一个名为webpack.config.js的文件，并添加以下配置：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js', // 项目的入口文件
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist'), // 打包文件放置的目录
},
};
第三步：
在package.json中添加一个脚本来运行webpack：
"scripts": {
"build": "webpack"
}
最后：
运行以下命令来打包你的JavaScript文件：
npm run build
这将会生成一个打包后的bundle.js文件在dist目录下。
2. Webpack打包HTML文件
当我们有了打包JS文件的基础时，再来打包HTML文件也会更好理解了。同样的，我们先下载好插件，下载指令为：
npm i html-webpack-plugin --save-dev
第二步：
在webpack.config.js文件，并添加以下配置：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件module.exports = {
// … 其他webpack配置
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’, // 指定原始的HTML文件
filename: ‘index.html’, // 打包后的HTML文件名
inject: ‘body’ // 将js脚本注入到body底部
})
]
// … 其他webpack配置
};
第三步：
运行以下命令来打包你的JavaScript文件：
npm run build
便得到了打包好的html文件
这里还有一个小亮点就是打包好的HTML文件中会自动将一起打包的JS文件导入，很贴心吧。
3.Webpack打包CSS文件和图片文件
因为Webpack打包文件并没有打包生成CSS文件方法，因此我们一般将CSS文件通过import方法导入JS文件中一起打包，你问为什么不打包放在HTML文件里？因为推荐将CSS文件通过Webpack打包后放置在JS中，这样可以更好地利用Webpack的模块化管理功能，并且有助于实现样式的按需加载。一句话，JS中的模块化更加方便。
同样的首先
安装style-loader和css-loader：
npm install --save-dev style-loader css-loader
第二步：
在webpack.config.js中配置loader：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// ...
]
}
// ...
plugins: [
new MiniCssExtractPlugin({
filename: 'dist/styles.css'
})
};
最后
在你的一同打包的JavaScript模块中引入CSS文件：
import './index.css';//CSS文件名
终端输入：
npm run build
运行得到打包后的文件 如果你的CSS文件中引用的图片文件，那也要一并打包，否则将会打包不成功。 而打包图片文件一样。
确保你已经安装了file-loader或url-loader。如果没有，可以通过npm安装：
npm i url-loader --save-dev
在的webpack.config.js文件中添加配置：
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]'
}
]
},
// ...
};
这样便得到了带有图片样式的CSS打包文件了
这里打包完成后可以随机检查一个CSS中的样式来确认是否打包成功 运行也是正常，就打包成功啦。
PS：一般小文件都不打包的，这些工具包的存储可能比你打包的文件都大了,当作练习就好了
纯手撸，有错误的地方欢迎指导一下。***** ******
***
* *
******
****
**
这是一个从 https://juejin.cn/post/7368433531927166986 下的原始话题分离的讨论话题