初识webpack(一)不知道各位平常有没有学习，进来瞅瞅复习复习，总感觉自己学的太浅了，但总感觉学了也没有用，大佬们平

闲来无事，摸起鱼来，感叹时间过得的真慢，还有4个小时才下班呢！再看眼身份证，我都18了，老大不小滴，抓紧干点啥吧，老铁们，最近市场行情怎么样式，欢迎留言

一.初始webpack

1.首先创建项目，这里用npm或者yarn或者pnpm都可以

mkdir webpack-demo

cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev
或者
yarn add webpack webpack-cli lodash --save-dev

2.创建project，项目目录如下

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

3.webpack.config.js配置（如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它）

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

4.入口文件配置src/index.js

import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

5.dist/index.html配置

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
 </html>

6.项目package.json管理，同时增加script脚本

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build":"webpack"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

至此，我们就可以通过刚才配置的命令执行，npm run build或yarn build来打包项目，

二.资源管理

1.重新引入script

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
    <title>管理资源</title>
   </head>
   <body>
    <script src="bundle.js"></script>
   </body>
 </html>

2.加载css

yarn add --save-dev style-loader css-loader

3.修改webpack.config.js打包输出文件名并加入css打包规则

const path = require('path');module.exports = {  entry: './src/index.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist'),  }, module: {   rules: [     {       test: /\.css$/i,       use: ['style-loader', 'css-loader'],     },   ], },};

4.src/style.css

.hello{    color: blue;}

5.src/index.html

import _ from 'lodash';import './style.css';function component() {    const element = document.createElement('div');    // lodash 现在使用 import 引入    element.innerHTML = _.join(['Hello', 'webpack'], ' ');    element.classList.add('hello');    return element;}document.body.appendChild(component());

注意：module loader 可以链式调用。链中的每个 loader 都将对资源进行转换，不过链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

6.当然，其实webpack也提供了处理静态文件的loader

webpack.config.js

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };

7.同时也可以加载字体，当有字体文件引入之后

webpack.config.js

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };

8.同时也可以加载数据

yarn add --save-dev csv-loader xml-loader

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
+      {
+        test: /\.(csv|tsv)$/i,
+        use: ['csv-loader'],
+      },
+      {
+        test: /\.xml$/i,
+        use: ['xml-loader'],
+      },
     ],
   },
 };

9.自定义JSON解析器

yarn add toml yamljs json5 --save-dev

const path = require('path');
+const toml = require('toml');
+const yaml = require('yamljs');
+const json5 = require('json5');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
       {
         test: /\.(csv|tsv)$/i,
         use: ['csv-loader'],
       },
       {
         test: /\.xml$/i,
         use: ['xml-loader'],
       },
+      {
+        test: /\.toml$/i,
+        type: 'json',
+        parser: {
+          parse: toml.parse,
+        },
+      },
+      {
+        test: /\.yaml$/i,
+        type: 'json',
+        parser: {
+          parse: yaml.parse,
+        },
+      },
+      {
+        test: /\.json5$/i,
+        type: 'json',
+        parser: {
+          parse: json5.parse,
+        },
+      },
     ],
   },
 };

针对不同类型的数据，可以通过不同的解析器来进行解析打包，同时也提示观看的你，这只是简单针对不同的文件进行不同的loader配置，那么针对这些静态资源，以及我们平常中常见的静态资源，甚至还要考虑到项目之间移植的问题，请看下期。

老铁们，最近市场行情怎么样式，欢迎留言