webpack4
2024-09-20 22:50:37
本地安装:
npm init -y
cnpm install webpack webpack-cli webpack-dev-server --save-dev
然后装一些所需要的loader和插件:
如:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/*
__dirname:当前文件夹的绝对路径
path.join() 将第一个参数和第二个参数进行链接
*/
const PATH = {
main:path.join(__dirname,"./src/index.js"),
build:path.join(__dirname,"./build")
}
//下面的代码都是 webpack的配置项
module.exports = {
entry:{
//这里面的key值决定了下面name的名字叫什么
main:PATH.main
},
output:{
filename:"[name].js",//app.js
path:PATH.build
},
mode:"development",
//做模块的处理 用loader进行处理
module: {
rules:[
{
test:/\.jsx?$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/env","@babel/react"]
}
}
},
{
test:/\.(css)$/,
use:[
{
loader: MiniCssExtractPlugin.loader,
options: {
//publicPath: "/"
}
},
{
loader: "css-loader",
options: {
importLoaders: 1,
minimize: process.env.NODE_ENV == "production"
}
},
{
loader: "style-loader"
}
]
},
{
test: /\.(jpe?g|png|gif|svg)/,
use: {
loader: "url-loader",
options: {
limit: 1024,
outputPath: "images/",
name: "[name].[ext]"
}
}
},
{
test: /\.(eot|ttf|woff2?)/i,
use: {
loader: "url-loader",
options: {
outputPath: "fonts/",
name: "[name].[ext]"
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:"index.html",
template:"./index.html",
hash: true
}),
new MiniCssExtractPlugin({
filename: "css/[name].bundle.css",
chunkFilename: "css/[name].chunk.css"
})
],
resolve: {
extensions: [".js", ".jsx", ".json", ".css", ".html"]
},
devtool: "source-map",//该选项控制是否以及如何生成源映射。选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。source-map之后你会发现你的 output 目录下多了一个 index.js.map 文件,此文件记录了sourceMap 行列信息如何映射源代码的信息
devServer: {//访问本地静态文件
compress: false,
//contentBase: "./public",
port: 8080,
proxy: {
"/": "http://localhost:3000"
}
}
}
最新文章
- Netty构建分布式消息队列(AvatarMQ)设计指南之架构篇
- uva 10375
- Caused by: Cannot locate the chosen ObjectFactory implementation: spring - [unknown location] 的解决方式
- html5 拖拽的简要介绍
- 拥有最小高度能自适应高度,IE、FF全兼容的div设置
- jquery之鼠标失去焦点事件
- SpringMVC整合Mybatis的流程
- Scrapy:Python实现scrapy框架爬虫两个网址下载网页内容信息——Jason niu
- 设计Optaplanner下实时规划服务的失败经历
- 【CTF杂项】常见文件文件头文件尾格式总结及各类文件头
- centos查看系统版本
- HDU 3338 Kakuro Extension (网络流,最大流)
- iOS pods编译原理
- 参照示例搭建一个Quertz + Topshelf的一个作业调度服务(基础)
- sencha touch 监听视图切换动画(animation)
- VS2010 中更改项目名称
- js中以键值对的形式当枚举
- 在 SharePoint 2010 打开网页出错时,显示实际的错误信息
- 使用SoupUI进行简单的WebService接口测试
- java程序设计基础篇 复习笔记 第六单元