resolve属性配置
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');
module.exports = {
// 多入口
mode: 'development',
entry: {
home: './src/index.js',
},
resolve: { // 解析第三方包 common
modules: [path.resolve('node_modules')], // 只在node_module目录下进行解析
extensions: ['.js', '.css', '.json'] // 默认按照文件名后缀进行查找
// mainFiles: [] // 入口文件的名字
// mainFields: [ // 主入口的字段
// 'style',
// 'main',
// ],
// alias: { // 别名
// bootstrap: 'bootstrap/dist/css/bootstrap.css'
// }
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devtool: 'cheap-module-eval-source-map',
output: {
// 这里的 name代表 home, other
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
chunks: [
"home",
],
}),
]
};