前言
webpack是一个现代化的前端打包工具，用于构建和打包Web应用程序的静态资源。通过将多个模块和文件打包成一个或者多个最终可部署文件，可以提高应用程序的性能和加载速度。它有以下功能：
- 模块打包：webpack支持将应用程序拆分成模块，并通过模块之间的依赖关系进行组织。它可以处理javascript、CSS和图片等等，将它们打包成最终的静态资源文件；
- 资源优化：一个web应用程序包含了很多文件，功能模块也很复杂，这时就要压缩优化文件，拆分模块，实现按需加载。而Webpack提供了多个的优化功能，比如压缩、代码分离、文件合并、Tree Shaking（消除未使用的代码）等等，可以解决以上问题；
- 开发环境支持：提供很多开发环境下的实用工具，比如自动刷新、热模块替换（HMR）、Source Map（调试工具）、DevServer（配置临时服务器）等等，可以高效开发和调试应用程序；
- 扩展性和生态系统：可以通过插件（plugin）和加载器（loader）来自定义和扩展功能。
在了解了webpack的作用以及功能之后，下面就让我们来学习webpack的使用！
webpack中文文档：webpack.docschina.org/
在学习的过程要多看文档，多看文档，多看文档！文档可以解决很多问题，可以解决你的一些疑惑。
安装
在使用之前，首先安装webpack
npm i webpack webpack-cli webpack-dev-server -Dnpm i webpack webpack-cli webpack-dev-server -Dnpm i webpack webpack-cli webpack-dev-server -D
webpack ：前端打包工具。
webpack-clii：与 Webpack 配合使用的命令行工具。它提供了一些命令，用于在命令行界面中与 Webpack 进行交互。通过 Webpack-cli，你可以运行 Webpack 的构建命令、配置文件，执行不同的构建任务，管理和控制 Webpack 的行为。
webpack-dev-server：是一个基于 Express 的开发服务器，用于在开发环境中快速搭建一个本地服务器。它提供了文件监听、自动刷新、热模块替换（HMR）等功能。
核心概念
入口(entry)
用来定义web应用程序的入口文件，webpack会从入口文件开始寻找哪些依赖是入口文件需要的。
我们需要新建一个webpack配置文件 webpack.config.js，在这个文件中就可以自定义我们的入口文件。
const path = require('path')module.exports = {entry: './src/index.js', // 入口文件路径，一个入口文件//如果是多个入口文件，就用对象包裹起来/*entry:{a: './src/index.js',b: './src/app.js',}*/};const path = require('path') module.exports = { entry: './src/index.js', // 入口文件路径，一个入口文件 //如果是多个入口文件，就用对象包裹起来 /* entry:{ a: './src/index.js', b: './src/app.js', } */ };const path = require('path') module.exports = { entry: './src/index.js', // 入口文件路径，一个入口文件 //如果是多个入口文件，就用对象包裹起来 /* entry:{ a: './src/index.js', b: './src/app.js', } */ };
注意：这里用的是node.js模块导入导出方式（CommonJs规范），这是因为Webpack是基于node.js运行的工具。还有这里涉及到的文件路径，都是按照node.js模块寻址规则来的。所以出入口文件路径一定要处理好！！！
输出(output)
从字面上意思就可以看出，这个属性是定义出口文件，也就是打包之后文件的输出路径。
如果你的文件目录结构复杂，一定要注意输出文件的路径！
module.exports = {// 入口文件entry: './src/index.js',// 输出文件output: {path: path.resolve(__dirname, 'dist'), // 输出文件路径filename: 'bundle.js', // 打包后生成js文件的文件名},}module.exports = { // 入口文件 entry: './src/index.js', // 输出文件 output: { path: path.resolve(__dirname, 'dist'), // 输出文件路径 filename: 'bundle.js', // 打包后生成js文件的文件名 }, }module.exports = { // 入口文件 entry: './src/index.js', // 输出文件 output: { path: path.resolve(__dirname, 'dist'), // 输出文件路径 filename: 'bundle.js', // 打包后生成js文件的文件名 }, }
entry、output实践
在了解了入口、输出文件之后，就让我们来实践一下吧！来验证一下理论知识。
首先我的文件目录结构是这样的：
a.js
export default function add(a, b) {console.log(a + b);}export default function add(a, b) { console.log(a + b); }export default function add(a, b) { console.log(a + b); }
index.js
import add from './app/a'add(1, 2)import add from './app/a' add(1, 2)import add from './app/a' add(1, 2)
在准备好这些之后，还要配置一下package.json文件，配置好运行webpack打包命令。
在执行npm run build 命令之后，控制台会输出一下内容，同时也会生成对应bundle.js文件，但是注意看，控制台出现了一个警告，意思是说模式还没有设置，并且给出了解决方案：设置mode为development（开发环境模式）或者production（生产环境模式）。所以只要在配置文件里加上mode属性即可。这样就不会有这个警告出现了。
加载器(loader)
从上面的例子可以看出，webpack可以打包js文件，那如果我们想处理css文件，又或者是stylus、less、sass、hbs文件呢？这时候就可以loader加载器进行处理。
比如这里是使用webpack加载css文件，首先安装相对应的loader，
npm install --save-dev style-loader css-loadernpm install --save-dev style-loader css-loadernpm install --save-dev style-loader css-loader
之后就可以将loader引入到你的配置文件中：
module.exports = {module: {rules: [{test: /\.css$/i, // 正则匹配css文件use: ["style-loader", "css-loader"], // 这里要注意loader引入的顺序，先style-loader后 css-loader},],},};module.exports = { module: { rules: [ { test: /\.css$/i, // 正则匹配css文件 use: ["style-loader", "css-loader"], // 这里要注意loader引入的顺序，先style-loader后 css-loader }, ], }, };module.exports = { module: { rules: [ { test: /\.css$/i, // 正则匹配css文件 use: ["style-loader", "css-loader"], // 这里要注意loader引入的顺序，先style-loader后 css-loader }, ], }, };
编写好css文件，然后在入口文件index.js引入css文件，记得在html文件也要引入打包生成的bundle.js文件，因为无论是js文件还是css文件还是stylus文件，最后打包了都汇集在一个文件里面。
效果图：
又比如你想用webpack加载stylus文件，首先先安装对应的loader,
npm install --save-dev stylus-loader // 如果你没有安装style-loader css-loader这两个，记得要安装上npm install --save-dev stylus-loader // 如果你没有安装style-loader css-loader这两个，记得要安装上npm install --save-dev stylus-loader // 如果你没有安装style-loader css-loader这两个，记得要安装上
之后就可以将loader引入到你的配置文件中：
module.exports = {module: {rules: [{test: /\.styl$/i,use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "stylus-loader",}]},],},};module.exports = { module: { rules: [ { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ], }, };module.exports = { module: { rules: [ { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ], }, };
这里要注意loader的加载顺序，使用方法跟上面加载css文件差不多的，一步步照着来就行。
也可以用webpack来管理图片，这里就不展开来说了。
插件(plugin)
loader用来处理某些特殊的文件或模块，插件可以用于处理更广的任务。webpack提供的插件接口非常强大，使插件可以完成各种任务。
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
// webpack.common.jsconst path = require('path');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')module.exports = {entry: {app: './app/main.js'},plugins: [// new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: './index.html',}),new BundleAnalyzerPlugin()],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, '../dist')},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.hbs$/,loader: "handlebars-loader"},{test: /\.styl$/i,use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "stylus-loader",}]},]}};// webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { entry: { app: './app/main.js' }, plugins: [ // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './index.html', }), new BundleAnalyzerPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.hbs$/, loader: "handlebars-loader" }, { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ] } };// webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { entry: { app: './app/main.js' }, plugins: [ // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './index.html', }), new BundleAnalyzerPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.hbs$/, loader: "handlebars-loader" }, { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ] } };
上面代码是根据我的项目来创建的一个配置文件
html-webpack-plugin插件可以创建一个html文件，如果你不设置任何参数，那么它就会生成最简单的html文件，比如像这样
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>webpack App</title></head><body><script src="index_bundle.js"></script></body></html><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>webpack App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>webpack App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html>
但如果你想以某个html文件为模板生成一个新的html文件，那就需要添加template参数
new HtmlWebpackPlugin({template: './index.html',}),new HtmlWebpackPlugin({ template: './index.html', }),new HtmlWebpackPlugin({ template: './index.html', }),
clean-webpack-plugin插件用来清除一些不必要的文件，每次打包都会更新dist文件夹。在打包的过程中如果你发现的图片、css文件等文件消失不见了的时候，请看一下有没有使用了这个插件，因为有可能被清理掉了。
webpack-bundle-analyzer插件可以用来分析各个模块之间的依赖关系，以便于后面代码分离、压缩代码等操作
开发工具 webpack-dev-server
是一个基于 Express 的开发服务器，用于在开发环境中快速搭建一个本地服务器。它提供了文件监听、自动刷新、热模块替换（HMR）等功能。
它的配置：
module.exports = {// 开发环境下的临时服务器devServer: {static: 'public', // 静态资源路径hot: true, // 是否开启热更新host: 'localhost',port: 8080,open: true, // 是否自动打开，设置为true，会自动打开html页面},};module.exports = { // 开发环境下的临时服务器 devServer: { static: 'public', // 静态资源路径 hot: true, // 是否开启热更新 host: 'localhost', port: 8080, open: true, // 是否自动打开，设置为true，会自动打开html页面 }, };module.exports = { // 开发环境下的临时服务器 devServer: { static: 'public', // 静态资源路径 hot: true, // 是否开启热更新 host: 'localhost', port: 8080, open: true, // 是否自动打开，设置为true，会自动打开html页面 }, };
在开发环境使用webpack-dev-server的时候，webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。如果你的页面希望在其他不同路径中找到 bundle 文件，可以通过 dev server 配置中的 publicPath 选项进行修改。
代码调试 source map
当 webpack 打包源代码时，可能会很难追踪到 error（错误）和 warning（警告）在源代码中的原始位置。例如，如果将三个源文件（a.js，b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含错误，那么堆栈跟踪就会直接指向到 bundle.js。但是你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。
为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码。source map 会直接告诉你错误来源于哪一个源代码。
module.exports = {devtool: 'inline-source-map',};module.exports = { devtool: 'inline-source-map', };module.exports = { devtool: 'inline-source-map', };
开发生产环境双配置
开发环境和生产环境使用的加载器和插件肯定会有所不同，下面对配置文件进行优化，实现相同配置优化，把开发环境和生产环境独有的配置项独立出来。
比如这个是开发生产环境都使用同一个配置文件：
// 使用node.js的模块导入和导出方式const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {mode: 'development',// 生产环境下entry: './src/index.js',// 生产环境下output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',// assetModuleFilename: 'images/[hash][ext][query]'},// 开发环境下 保留源码devtool: 'inline-source-map',// 开发环境下的临时服务器devServer: {proxy: { // proxy URLs to backend development server'/': 'http://localhost:8080'},static: path.join(__dirname, '/dist/'),compress: true,historyApiFallback: true,hot: true,open: true},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.styl$/,use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "stylus-loader",}]},{test: /\.hbs$/,loader: "handlebars-loader",},{test: /\.(png|jpg|gif)$/,type: 'asset/resource'}]},plugins: [new HtmlWebpackPlugin({title: "Webpack",template: "index.html"}),new CleanWebpackPlugin()]}// 使用node.js的模块导入和导出方式 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', // 生产环境下 entry: './src/index.js', // 生产环境下 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', // assetModuleFilename: 'images/[hash][ext][query]' }, // 开发环境下 保留源码 devtool: 'inline-source-map', // 开发环境下的临时服务器 devServer: { proxy: { // proxy URLs to backend development server '/': 'http://localhost:8080' }, static: path.join(__dirname, '/dist/'), compress: true, historyApiFallback: true, hot: true, open: true }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.styl$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, { test: /\.hbs$/, loader: "handlebars-loader", }, { test: /\.(png|jpg|gif)$/, type: 'asset/resource' } ] }, plugins: [ new HtmlWebpackPlugin({ title: "Webpack", template: "index.html" }), new CleanWebpackPlugin() ] }// 使用node.js的模块导入和导出方式 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', // 生产环境下 entry: './src/index.js', // 生产环境下 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', // assetModuleFilename: 'images/[hash][ext][query]' }, // 开发环境下 保留源码 devtool: 'inline-source-map', // 开发环境下的临时服务器 devServer: { proxy: { // proxy URLs to backend development server '/': 'http://localhost:8080' }, static: path.join(__dirname, '/dist/'), compress: true, historyApiFallback: true, hot: true, open: true }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.styl$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, { test: /\.hbs$/, loader: "handlebars-loader", }, { test: /\.(png|jpg|gif)$/, type: 'asset/resource' } ] }, plugins: [ new HtmlWebpackPlugin({ title: "Webpack", template: "index.html" }), new CleanWebpackPlugin() ] }
所以需要把原来的webpack.config.js配置文件拆分三个或者四个文件：
（下面的划分是根据我的项目来的）
webpack.common.js公共环境的配置文件webpack.dev.js开发环境下的配置文件webpack.prod.js生产环境下的配置文件webpack.parts.js各个配置零件的配置文件
webpack.common.js 公共环境的配置文件
// webpack.common.jsconst path = require('path');const { CleanWebpackPlugin } = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')module.exports = {entry: {app: './app/main.js'},plugins: [// new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: './index.html', // 注意路径}),new BundleAnalyzerPlugin()],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, '../dist') // 注意路径},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.hbs$/,loader: "handlebars-loader"},{test: /\.styl$/i,use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "stylus-loader",}]},]}};// webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { entry: { app: './app/main.js' }, plugins: [ // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './index.html', // 注意路径 }), new BundleAnalyzerPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist') // 注意路径 }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.hbs$/, loader: "handlebars-loader" }, { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ] } };// webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { entry: { app: './app/main.js' }, plugins: [ // new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './index.html', // 注意路径 }), new BundleAnalyzerPlugin() ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, '../dist') // 注意路径 }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.hbs$/, loader: "handlebars-loader" }, { test: /\.styl$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", } ] }, ] } };
webpack.dev.js 开发环境下的配置文件
// webpack.dev.jsconst { merge } = require('webpack-merge');const path = require('path')const common = require('./webpack.common.js');module.exports = merge(common, {mode: 'development',// 开发环境下 保留源码 inline-source-mapdevtool: 'eval',// 开发环境下的临时服务器devServer: {static: 'dist',hot: true,host: 'localhost',port: 8080,open: true,},});// webpack.dev.js const { merge } = require('webpack-merge'); const path = require('path') const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', // 开发环境下 保留源码 inline-source-map devtool: 'eval', // 开发环境下的临时服务器 devServer: { static: 'dist', hot: true, host: 'localhost', port: 8080, open: true, }, });// webpack.dev.js const { merge } = require('webpack-merge'); const path = require('path') const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', // 开发环境下 保留源码 inline-source-map devtool: 'eval', // 开发环境下的临时服务器 devServer: { static: 'dist', hot: true, host: 'localhost', port: 8080, open: true, }, });
webpack.prod.js 生产环境下的配置文件
// webpack.prod.jsconst common = require('./webpack.common');const {merge} = require('webpack-merge');// const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');module.exports = merge(common,{mode: "production", //development|productionoutput: {filename: '[name].[hash:7].js'},// 排除某些依赖包不被打包，只在运行时从CDN引入externals: {// jquery: 'jQuery',// wangeditor: 'wangEditor'},plugins:[// new UglifyjsWebpackPlugin()],// 将公共模块单独打包，使得它们可以被缓存和复用optimization: {splitChunks: {cacheGroups: { // 用于配置缓存组的对象commons: {test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的模块name: 'vendors', // 提取的公共模块的文件名chunks: 'all', // 对所有的代码进行优化},},},},})// webpack.prod.js const common = require('./webpack.common'); const {merge} = require('webpack-merge'); // const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); module.exports = merge(common,{ mode: "production", //development|production output: { filename: '[name].[hash:7].js' }, // 排除某些依赖包不被打包，只在运行时从CDN引入 externals: { // jquery: 'jQuery', // wangeditor: 'wangEditor' }, plugins:[ // new UglifyjsWebpackPlugin() ], // 将公共模块单独打包，使得它们可以被缓存和复用 optimization: { splitChunks: { cacheGroups: { // 用于配置缓存组的对象 commons: { test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的模块 name: 'vendors', // 提取的公共模块的文件名 chunks: 'all', // 对所有的代码进行优化 }, }, }, }, })// webpack.prod.js const common = require('./webpack.common'); const {merge} = require('webpack-merge'); // const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); module.exports = merge(common,{ mode: "production", //development|production output: { filename: '[name].[hash:7].js' }, // 排除某些依赖包不被打包，只在运行时从CDN引入 externals: { // jquery: 'jQuery', // wangeditor: 'wangEditor' }, plugins:[ // new UglifyjsWebpackPlugin() ], // 将公共模块单独打包，使得它们可以被缓存和复用 optimization: { splitChunks: { cacheGroups: { // 用于配置缓存组的对象 commons: { test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的模块 name: 'vendors', // 提取的公共模块的文件名 chunks: 'all', // 对所有的代码进行优化 }, }, }, }, })
在进行划分了之后，在package.json文件中新增三条快捷命令
"build": "npx webpack --config ./config/webpack.prod.js","dev": "npx webpack --config ./config/webpack.dev.js","start": "webpack serve --config ./config/webpack.dev.js""build": "npx webpack --config ./config/webpack.prod.js", "dev": "npx webpack --config ./config/webpack.dev.js", "start": "webpack serve --config ./config/webpack.dev.js""build": "npx webpack --config ./config/webpack.prod.js", "dev": "npx webpack --config ./config/webpack.dev.js", "start": "webpack serve --config ./config/webpack.dev.js"
在划分了三个文件之后，涉及到文件路径的地方一定要多加注意，因为很容易就会出错，项目目录结构越复杂就越容易出错！！！
报错记录
Invaild options object.Dev Server has been initalized…
这个报错的意思是某个属性找不到，错误的原因是我用的时候webpack 5+版本，而我用了webpack 4+的但webpack 5+已经弃用了的属性。
生产环境下打包没有在相对应的dist文件夹里面生成js和html文件
我的项目目录结构：
原因分析：经过分析是输出文件路径的问题
我当时的输出文件路径是path: path.resolve(__dirname, 'dist')，而webpack.dev.js等配置文件是在config文件夹里面的，这样的话输出文件是在config文件夹下的dist下，但明显不是，打包都的输出文件要在与Index.html同目录的dist文件夹，所以需要修改路径为path: path.resolve(__dirname, '../dist')
webpack-dev-server在编译后找不到css文件和图片
原因分析：
首先在开发环境使用webpack-dev-server的时候，webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样；
其次我的开发环境配置里面可访问的资源路径是public，而输出文件路径是dist，当编译之后，服务器就会以/dist/为根目录，访问里面的资源，而dist文件里有没有css和image文件，所以访问不到资源。
所以我把可访问的静态资源路径和输出文件路径都设置一样，最后就可以正常访问了。
Refused to apply style from ‘http://localhost:8080/css/index.css‘ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
原因分析：我在html文件引入了css文件，而我的css文件又存放在输出文件里，由于我又使用clean-webpack-plugin插件，每次打包的时候都会更新dist文件夹里的内容，所以把css文件给清理掉，导致无法引入css文件。所以我把这个插件给注释掉，重新生成一份css文件就可以了。
最后
这是我入门学习webpack之后整理的一些学习笔记和踩的一些坑记录下来，如有不对的地方或者需改善的地方，欢迎大家批评指正！
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
