const webpack = require("webpack")
const HtmlPlugin = require('html-webpack-plugin')
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
devServer: {
open: true,
// port: 8080,
host: '127.0.0.1',
static: path.resolve(__dirname, './src/htmls')
},
module: {
rules: [
// TODO: 配置导出文件夹
// {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.jpg|png|gif$/, use: 'url-loader'},
]
},
entry: {
// 新页面需添加新入口
index: './src/js/index.js',
test: './src/js/test.js',
},
output: {
/**
* With zero configuration,
* clean-webpack-plugin will remove files inside the directory below
*/
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
},
plugins: [
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
}),
// new MiniCssExtractPlugin({
// // linkType: "text/css",
// filename: "css/[name].css"
// }),
// home页打包
new HtmlPlugin({
// chunks: ['index'],
chunks: [], // 不注入js,在单个页面中手动引入各自的js
template: './src/htmls/index.html',
filename: './htmls/index.html'
}),
// test页打包
new HtmlPlugin({
// chunks: ['test'],
chunks: [], // 不注入js,在单个页面中手动引入各自的js
template: './src/htmls/test.html',
filename: './htmls/test.html'
})
// 新页面需添加新打包位置
],
}