常用的webpack 配置
2024-09-03 09:03:47
const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname),
filename:'bundle.js',
},
resolve: {
// 设置别名
alias: {
'@': resolve('src'),// 这样配置后 @ 可以指向 src 目录
'@components': path.resolve(__dirname, 'src/components')
}
},
module:{
rules:[
{test:/\.css/,use:['vue-style-loader','css-loader']},
{
test:/\.js/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
},
},
exclude:/node_modules/,
},
{test:/\.vue/,use:'vue-loader'}
]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
};
webpack webpack-cli webpack-dev-server webpack 需要的
vue-style-loader css-loader 处理css样式
html-webpack-plugin 处理html
@babel/core @babel/preset-env babel-loader 处理es6 语法
vue-template-compiler vue-loader 处理vue 编译的
webpack-merge 合并webpack 配置
最新文章
- RabbitMQ的安装
- 《深度探索C++对象模型（Inside The C++ Object Model ）》学习笔记
- 说说设计模式~建造者模式(Builder)
- HDU4348 To the moon
- ajax鼠标滚动请求 或 手机往下拉请求
- [LintCode] Swap Two Nodes in Linked List 交换链表中的两个结点
- 使用 robotframework 自动化测试系列 一 -----简介
- Jmeter—1 安装
- LoadRunner_Analysis(z) 分析
- ExtJS 4 组件详解
- Scala基础入门－3
- maven 启蒙
- 初学Python（一）——数据类型
- XSS和CSRF
- java ee wildfly 批处理 job 工作
- Oracle 创建表并设置主键自增
- luogu P1776 宝物筛选_NOI导刊2010提高（02）
- 在项目中使用react
- word2vec 小测试
- HTML标签 select 里 动态添加option