const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 获取绝对路径
const resolve=dir=>{
path.resolve(__dirname,dir)
};
module.exports = {
// mode:'production';
mode: 'development',
entry: {
index:'./src/pages/index/index.js',
},
output: {
path: resolve('dist'),
filename: 'js/[name].js'
},
// source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
devtool:'eval-cheap-source-map',
resolve:{
// 自动补全（可以省略）的扩展名
extensions:['.js'],
// 路径别名
alias: {
api: resolve('src/api'),
fonts: resolve('src/assets/fonts'),
images: resolve('src/assets/images'),
styles: resolve('src/assets/styles'),
components: resolve('src/components'),
pages: resolve('src/pages')
}
},
// 不同类型模板的处理规则
module: {
rules: [
// CSS
{
test:/\.css$/,
use:['style-loader','css-loader']
},
// 模板文件
{
test: /\.art$/,
loader:'art-template-loader'
},
// 图片
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:'url-loader',
options:{
// 小于10K的图片转成base64编码的dataURL字符串写到代码中
limit:10000,
// 其他图片转移到
name:'./images/[name].[ext]',
esModule:false
}
},
// 字体文件
{
test:/\.(woff2?|eto|ttf|otf)$/,
loader:'url-loader',
options:{
limit:10000,
name:'fonts/[name].[ext]'
}
}
]
},
plugins: [
// 自动将依赖注入html模板，并输出最终的html文件到目标文件夹
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index/index.art',
})
]
};
老师，你好，这种问题要怎么解决呀。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星