在 Webpack 中使用 art-template

一、搭建Webpack环境

1. 项目目录

2. 初始化项目

npm init

3. 安装 Webpack 相关依赖包

npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12 html-webpack-plugin@4.3.0

4. 修改 scripts

"scripts": {
    "start": "webpack"
}

二、安装、配置 art-template

1. 安装 art-template 和 art-template-loader

npm install art-template@4.13.2
npm install art-template-loader@1.4.3 --save-dev

2. 配置 webpack.config.js

• 目录结构

• art文件与js文件中的内容

• webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { modulefilenameHelpers } = require('webpack');

// 获取绝对路径
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    mode: 'development',
    // webpack 入口文件
    entry: {
        index: './src/index.js',
        list: './src/list.js'
    },
    // Webpack 输出路径
    output: {
        // 输出的目录
        path: resolve('dist'),
        // 输出的文件名
        filename: 'js/[name].js'
    },
    // source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
    devtool: 'cheap-module-eval-source-map',
    // 不同类型模块的处理规则
    module: {
        rules: [
            // 模板文件
            {
                test: /\.art$/,
                loader: 'art-template-loader'
            }
        ]
    },
    plugins: [
        // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.art',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
          filename: 'list.html',
          template: './src/list.art',
          chunks: ['list']
        })
    ]
}

三、编译打包

npm start

• 在浏览器打开 index.html、list.html

注：art-template帮助文档（Webpack - art-template）