// ./src/main.js --output ./dist/bundle1.js --mode development
// webpack 基于node 所以很多node的语法和模块 都是可以直接使用的
const path = require('path')
// 第一步 : 引入 html-webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin')
// 清除 dist
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/main.js'),
// 出口
output: {
// 出口文件夹
path: path.join(__dirname, './dist'),
// 出口文件
filename: 'bundle.js',
},
// 环境
mode: 'development',
// loaders
module: {
// 规则
rules: [
// 处理 css index.css
{ test:/\.css$/ , use:['style-loader','css-loader'] },
// 处理 less
{ test:/\.less$/ , use:['style-loader','css-loader','less-loader'] },
// 处理图片
{ test:/\.(jpg|gif|png)$/ , use:['url-loader'] },
// 处理 es6+语法
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 处理es6-最新
}
}
}
],
},
// 插件
plugins: [
// 第二步 : 实例插件
new htmlWebpackPlugin({
template: path.join(__dirname, './public/index.html'),
}),
// 实例清除插件
new CleanWebpackPlugin()
],
// 配置 webpack-dev-server
devServer : {
open : true,
hot : true,
port : 3001
}
}
