WebPack配置及使用方法

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

更多配置及使用方法详见https://www.webpackjs.com/

npm项目初始化及webpack相关依赖安装

// 初始化npm项目及安装webpack必备依赖
npm init -y
npm install webpack webpack-cli --save-dev

// 按需安装webpack加载器(loader)
// css加载器
npm install --save-dev style-loader css-loader
// 文件加载器
npm install --save-dev file-loader
// 数据加载器
npm install --save-dev csv-loader xml-loader

配置webpack配置文件

const path = require("path");

module.exports = {
    // 配置入口js文件
    // index.js中导入了hello.js的文件,因此两者都需配置
    entry: {
        index: "./src/index.js",
        hello: "./src/hello.js",
    },
    output: {
        // 打包后js文件名称
        // 多个入口文件根据entry配置中的key分别生成 index.bundle.js 和 hello.bundle.js
        filename: "[name].bundle.js",
        // 打包js文件输出目录
        path: path.resolve(__dirname, "dist")
    },
    // webpack模块加载配置
    module: {
        // 根据正则匹配文件配置loader
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    "file-loader"
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    "csv-loader"
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    "xml-loader"
                ]
            }
        ]
    }
};

js入口文件index.js可如下进行引用

// src/index.js
// 主js文件中导入了同级目录下的style.css,icon.png,data.xml,greeting函数以及第三方lodash库

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Data from './data.xml';

import greeting from "./hello.js";

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

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

  var myIcon = new Image();
  myIcon.src = Icon;

  element.appendChild(myIcon);

  console.log(Data);

  return element;
}

document.body.appendChild(component());
greeting();

由于webpack.config.js中配置了出口文件及地址(output), html导入时需如下

// dist/index.html
...
<script src="./index.bundle.js"></script>
...

在项目package.json中配置build命令行快捷方式

// package.json
{
    ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    ...
}

// 配置后即可直接通过npm快捷方式进行打包
// 等于npx webpack --config webpack.config.js
npm run build