针对仅有js文件设置打包入口和出口

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'output')
  }
}

package.json的scripts增加如下

"build": "webpack"

安装依赖webpack webpack-cli
将output文件夹下的bundle.js通过标签引入至index.html

mode

module.exports = {
  // 这个属性有三种取值，分别是 production、development 和 none。
  // 1. 生产模式下，Webpack 会自动优化打包结果；
  // 2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
  // 3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
  mode: 'development',
}

含有其他文件打包构建 在 Webpack 中，loader 的执行顺序是从右到左、从下到上

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: 'file-loader'
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10 KB
          }
        }
      }
    ]
  }
}

babel转译高阶语法

首先，安装必要的依赖：
npm install babel-loader @babel/preset-env @babel/core --save-dev

在 Webpack 配置中配置 babel-loader：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在项目根目录下创建 .babelrc 文件，配置 @babel/preset-env（可省略）：

{
  "presets": ["@babel/preset-env"]
}

html-loader用于解析html，markdown文件的解析获取

  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          'html-loader',
          './markdown-loader'
        ]
      }
    ]
  }

创建js文件，通过marked包来解析成html交给下一个loader处理

const marked = require('marked')

module.exports = source => {
  const html = marked(source)
  // return html
  // return `module.exports = "${html}"`
  // return `export default ${JSON.stringify(html)}`

  // 返回 html 字符串交给下一个 loader 处理
  return html
}

插件

module.exports = {
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
}

webpack.ProgressPlugin() 是 Webpack 的内置插件，用于在控制台中显示构建进度信息。当构建项目时，它会输出构建进度的百分比、模块数量等信息
CleanWebpackPlugin() 是一个第三方插件，用于在每次构建之前清理输出目录。
CopyWebpackPlugin() 在构建过程中将指定的文件或目录复制到输出目录
HtmlWebpackPlugin() 是第三方插件，用于简化创建 HTML 文件的过程。它会自动在构建过程中生成一个 HTML 文件，并将打包后的资源（如 JavaScript 文件）自动注入到 HTML 中，同时还可以设置模板、标题、meta 标签等内容,可多次调用生成多个HTML文件，设置模板填充内容实例如下

// 用于生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: './src/index.html'
    }),
    // 用于生成 about.html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    })

template中的html文件含有如下内容可自动填充
<h1><%= htmlWebpackPlugin.options.title %></h1>

自己插件的开发

TO DO：16-my-webpack-plugin

webpack配置实现项目启动和热更新

安装devServer，添加如下配置

module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true,
	open:true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

webpack.HotModuleReplacementPlugin() 被添加到了插件列表中，以启用模块热替换功能。
在 devServer 配置中，设置了 contentBase，指定了服务器从哪里提供内容。通常这里设置为输出目录，以便 webpack-dev-server 可以从输出目录中提供生成的文件。
hot: true 选项告诉 webpack-dev-server 在发生代码更改时启用模块热替换,open:true浏览器自执行
确保在入口文件（例如 src/index.js）中添加了模块热替换的代码，以便接受更新的模块。

if (module.hot) {
  module.hot.accept();
}

source map

Source map 是一种文件，它将编译后的代码映射回原始源代码，这样在调试时可以更容易地追踪到问题所在。
webpack配置如下

devtool: 'inline-source-map'| 'eval' | 'inline-source-map' | 'cheap-source-map' | 'cheap-module-source-map'