webpack基础

package.json 文件

{
	"private": "true", //以便确保我们安装包是 private(私有的)
	"scripts": { //快捷方式，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "build": "webpack",
	    "watch": "webpack --watch", //仅用于开发环境，不用每次npm run build就运行，更改代码会重置编译，不用手动构建。唯一的缺点是，为了看到修改后的实际效果，你需要刷新浏览器，如果能够自动刷新浏览器 webpack-dev-server 实现此功能。
	 },
	 
}

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',//设置环境为开发环境
  entry: './src/index.js', //文件配置入口，方式一
  entry: {               //文件配置入口，方式二（防止多次导入）
    //配置入口文件
    index: {
      import: "./src/index.js",
      dependOn: "shared",
    },
    shared: "lodash",
  },
  devtool: 'inline-source-map' //仅用于开发环境，查看编译报错在代码中的具体位置
  output: {
    filename: 'main.js',//指定输出文件
    filename: '[name].bundle.js', //配置多入口文件的输出
    path: path.resolve(__dirname, 'dist'),
    clean: true, //清理 /dist 文件夹
  },
   optimization: {
     splitChunks: {//插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。使用这个插件，可以将重复的模块去除
       chunks: 'all',
     },
   },
   module: {
     rules: [
     //配置加载css,图片，json,字体，数据等格式文件
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
     ],
};

npx webpack

执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。

加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

npm install --save-dev style-loader css-loader

加载数据

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

npm install --save-dev csv-loader xml-loader

加载自定义 JSON 模块 parser

npm install toml yamljs json5 --save-dev

HtmlWebpackPlugin

HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

webpack-dev-server （仅用于开发环境）

为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。

npm install --save-dev webpack-dev-server

webpack-dev-middleware（仅用于开发环境）

个人理解是修改本地运行的端口号

npm install --save-dev express webpack-dev-middleware