一、搭建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
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
