webpack5使用说明

本文尚未完成，后续持续更新

起步

1. 开始：搭建webpack基础环境

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
mkdir src
mkdir dist 

2. 修改package.json文件
   1. json文件里的注释自行去掉，json文件不支持注释
   2. -号表示需要在源文件删除，+号表示需要新增

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   // main和private的修改确保安装包是私有的，防止意外发布代码
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     //可以使用npm run build构建代码 
     //--config  webpack.config.js可以省略，--config默认文件名为：webpack.config.js
     //如果需要自定义配置文件名，修改此选项即可
+    "build": "webpack --config webpack.config.js"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
     //这里的内容是npm下载依赖时系统自动生成,不需要手动修改
+	"依赖包名":"版本号"
   }
 }

3. 创建webpack.config.js文件

 const path = require('path');

 module.exports = {
 	//设置webpack的入口js文件
   entry: './src/index.js',
   //代码输出相关配置
   output: {
   	//设置打包输出的js文件名称
     filename: 'bundle.js',
     //设置文件输出到哪个目录
     path: path.resolve(__dirname, 'dist'),
   },
 };

依赖列表

• webpack webpack-cli
  • 命令：npm install webpack webpack-cli --save-dev
  • 作用：搭建webpack环境
• style-loader css-loader
  • 命令： npm install --save-dev style-loader css-loader
  • 作用：加载css文件
• webpack-dev-server
  • 命令：npm install --save-dev webpack-dev-server
  • 作用：自动编译代码
• html-webpack-plugin
  • 命令：npm install --save-dev html-webpack-plugin
  • 作用：自动生成html5文件
  • 官网文档地址
• @babel/core @babel/preset-env babel-loader
  • 命令：npm install --save-dev @babel/core @babel/preset-env
  • 作用：①生成兼容指定浏览器版本的js代码工具的核心代码。②生成预置的babel环境。③将babel和webpack结合
• core-js
  • 命令：npm install --save-dev core-js
  • 作用：可以使本不兼容新特性的浏览器上使用新特性

配置文件详解

默认配置文件名webpack.config.js,如果需要要自定义配置文件名则

 const path = require('path');

 module.exports = {
 	//设置webpack的入口js文件
   entry: './src/index.js',
   //代码输出相关配置
   output: {
   	//设置打包输出的js文件名称
     filename: 'bundle.js',
     //设置文件输出到哪个目录
     path: path.resolve(__dirname, 'dist'),
     //指定输出的文件名结果
     assetModuleFilename: 'images/[hash][ext][query]',
   },
   
  module: {
    rules: [
     //加载css文件
      {
      	//设置匹配的文件名后缀
        test: /\.css$/i,
        //设置使用的依赖
        use: ['style-loader', 'css-loader'],
      },
      //加载image图片
      {
      	//设置匹配的文件名后缀
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        //设置资源模块类型，详情查看https://webpack.docschina.org/guides/asset-modules/
        type: 'asset/resource',//asset/inline | asset/source | asset
      },
      //加载字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      //加载csv，tsv文件
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      //加载xml文件
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
      {
	    test: /\.html/,
	    type: 'asset/resource',
	    //生成文件到指定目录
	    generator: {
	      filename: 'static/[hash][ext][query]'
	    }
	    //排除HTMLWebpackPlugins设置中的模板文件，否则会造成该插件某些配置失效
	    exclude:/module.html/
      }
      //加载
      //加载其它文件
     //具体使用参考https://webpack.docschina.org/guides/asset-management/
    ],
  },
    plugins: [
    //加载html-webpack-plugin插件,生成html文件，详情参考https://github.com/jantimon/html-webpack-plugin#options
    //注意：HTMLWebpackPlugin
      new HTMLWebpackPlugin({
      	//设置生成的html的文件title
          title:'webpack-ts',
          //设置生成html文件的模板
          template: "./src/module/module.html",
          //设置生成的文件名，
          filename: "[name].create.html",
          inject: true,
      }),
    ],
 };

自动编译代码

调整文本编辑器

使用自动编译代码时，可能会在保存文件时遇到一些问题。某些编辑器具有 “safe write(安全写入)” 功能，会影响重新编译。如不影响编译不建议关闭，safe write的作用是保证要保存的文件不会丢失，具体原理详见这篇博文

在一些常见的编辑器中禁用此功能，查看以下列表：

• Sublime Text 3：在用户首选项(user preferences)中添加 atomic_save: 'false'。
• JetBrains IDEs (e.g. WebStorm)：在 Preferences > Appearance & Behavior > System Settings 中取消选中 "Use safe write"。
• Vim：在设置(settings)中增加 :set backupcopy=yes。