webpack基本配置详细记录

最新推荐文章于 2024-04-29 19:38:31 发布
最新推荐文章于 2024-04-29 19:38:31 发布
阅读量387 收藏 2
点赞数 1
分类专栏： 前端 文章标签： webpack javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/109954915
版权

基础配置

配置入口出口

未配置webpack.config.js时，需要在终端输入webpack ./src/main.js ./dist/bundle.js(指定入口出口)来对js文件打包。
配置后，使用webpack即可打包

// 在项目根目录新建webpack.config.js，编辑以下代码
const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

配置Loader

配置解析CSS

webpack除了将js文件打包，作为模块化使用之外，还具有其他附带的功能，比如可以将css打包到js文件中，当作模块使用

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // 使用方向从右往左
                // 先使用css-loader将css文件打包，
                // 再使用style-loader将css写入文档中
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

// 使用的loader版本如下
    "css-loader": "^2.0.2",
    "style-loader": "^0.23.1",

配置解析less

除了解析css外，还能解析less等

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

// 使用的loader及less版本如下
    "css-loader": "^2.0.2",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",

配置解析图片

webpack还能解析图片

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 公共路径，会拼接在所有相对路径的头部
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.(jpg|png|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于limit时，转换为base64字符串
                            // 图片大小大于limit时，使用file-loader加载，因此还需要下载file-loader(不需要再配置)
                            limit: 8192,
                            // img文件夹下，使用原名字name，hash值取前8位防止重名，再使用原拓展名ext
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }

        ]
    }
}

// 使用的loader版本
"url-loader": "^1.1.2",
"file-loader": "^3.0.1"

配置babel，ES6转ES5提升浏览器兼容性

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                	// 该loader还需要依赖babel-core, babel-preset文件，需要同时安装(但不需要配置)
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }

        ]
    }
}

// 使用的loader版本
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    // es2015即ES6, 帮助es6转为es5
    "babel-preset-es2015": "^6.24.1"

配置vue

  1. 配置使用runtime-compiler版的vue

module.exports = {
    resolve: {
    	// vue发布时有多个版本，其中就包括runtime-only和runtime-compiler版
    	// 默认使用前者，不包含编译相关的代码
    	// 此处配置，使用vue包含compiler的发布版
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

}

// 使用的vue版本
	"vue": "^2.5.21"

第一步配置完成，就可以在项目中使用vue进行开发了，使用如下

import Vue from 'vue'

new Vue({
    el: '#app',
    template: `
    <div>
        <h1>Vue</h1>
        <h1>{{message}}</h1>
    </div>
    `,
    data: {
        message: "hello"
    }
})

也可以将模版template抽出到另一个文件中方便管理

// app.js
export default {
    template: `
    <div>
        <h1>Vue</h1>
        <h1>{{message}}</h1>
    </div>
    `,
    data() {
        return {
            message: "hello"
        }
        
    }

}

import Vue from 'vue'

import APP from './vue/app.js'

new Vue({
    el: '#app',
    template: `
        <APP/>
    `,
    components: {
        APP
    }

})

也能够达到模块化的效果，但是我们在项目中常用的是.vue文件，因此还需要配置第二步
2. 配置解析vue

const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

// 使用的loader版本
// loader版本需要与compiler版本相对应
    "vue-loader": "^9.0.0",
    "vue-template-compiler": "^2.5.21",

使用如下

<!-- app.vue -->
<template>
    <div>
        <h1>Vue</h1>
        <h1>{{message}}</h1>
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: "hello"
        }
    }
}
</script>

import Vue from 'vue'

import APP from './vue/app.vue'

new Vue({
    el: '#app',
    template: `
        <APP/>
    `,
    components: {
        APP
    }

})

配置省略扩展名

有时我们引入文件的时候，比如index.js, App.vue等等，我们不想写后缀，如：import 'App'，可以这样地配置

module.exports = {
    resolve: {
        extensions: ['.js', '.vue'],
    }
}

使用 Plugin

使用 BannerPlugin

主要作用就是在打包后的文件头部添加一些说明文字

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    plugins: [
    	// webpack自有的Plugin, 不需要安装
        new webpack.BannerPlugin('最终版权归hello所有')
    ]

}

在这里插入图片描述

使用 html-webpack-plugin

需求：打包的dist 文件夹只有bundle.js，而使用bundle.js的index.html没在dist文件夹下，不可以直接发布，因此需要在dist文件夹下同时生成index.html

作用：

  1. 自动生成一个index.html (可以指定模板来生成)
  2. 将打包的JS文件，自动通过script标签插入到body中

配置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 因为index.html就在dist文件夹下，路径问题不存在了，这句代码也不再需要
        // publicPath: 'dist/'
    },
    plugins: [
    	// 使用默认index.html模版
		// new HtmlWebpackPlugin(),
        // 根据已存在的模版生成
        new HtmlWebpackPlugin({
        	// 使用scr/index.html生成dist/index.html
            template: 'index.html'
        })
    ]

}

相关文件版本：

	"html-webpack-plugin": "^3.2.0",

<!-- 默认生成的index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

<!-- 根据已存在的模版生成 -->
<!-- 因为vue通常要挂载到#app下，因此一般用这种方式 -->

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

使用 uglifyjs-webpack-plugin

作用： 压缩打包后的js文件
相关文件版本：
配置：

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [
        new UglifyJsPlugin()
    ]

}

在这里插入图片描述

搭建本地服务器 webpack-dev-server

需求：每次改动文件过后需要手动打包再运行网页文件非常繁琐，因此希望改动文件之后能够自动打包(打包结果在内存，不会保存到硬盘)，并且将改动体现在网页上

配置：

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: './dist',  //   为哪一个文件夹提供本地服务
        inline: true,   // 页面是否实时刷新
        port: 8080		// 监听端口
    }
}

再配置一下脚本命令

  "scripts": {
  	// --open 表示自动打开浏览器
    "dev": "webpack-dev-server --open"
  },

然后通过npm run dev 就可以将本地服务器运行起来

依赖的文件版本：

"webpack-dev-server": "^2.9.1"

webpack 配置分离

需求：在webpack配置里面，有一部分属于基础配置，即在开发和生产环境下都需要的配置，而另外部分的配置可能属于仅在生产环境下需要，或仅在开发环境下需要，一旦配置项变多，很容易混淆，因此希望可以将各种配置分离开，在对应环境使用对应的配置。

  1. 在项目文件夹下新建build文件夹，并创建相应文件
/build
 - base.config.js
 - dev.config.js
 - prod.config.js

在这里插入图片描述
2. 安装webpack-merge并作以下配置

// dev.config.js
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true
    }
})

// prod.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        new UglifyJsPlugin()
    ]
})

// base.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
    	// 因为配置文件相对于dist文件夹的位置发生了变化，因此这里也需要配置一下
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
			...
        ]
    },
    resolve: {
			...
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归hello所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        // 这个搬到prod.config.js里面
        // new UglifyJsPlugin()
        
    ],
    // 这个搬到dev.config.js里面
    /*
    devServer: {
        contentBase: './dist',
        inline: true
    }*/

}
  1. 配置package.json
  "scripts": {
  	// 生产打包时运行
    "build": "webpack --config ./build/prod.config.js",
    // 开发时运行
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

依赖文件版本

"webpack-merge": "^4.1.5"
tanleiDD
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【Kafka】kafka 脚本kafka-configs.sh用法解析
九师兄
09-17 4455
1.概述 引用博客来自李志涛：https://www.cnblogs.com/lizherui/p/12275193.html 2.前言介绍 网络上针对脚本kafka-configs.sh用法，也有一些各种文章，但都不系统不全面，介绍的内容是有缺失的，总让人看起来很懂，用起来难，例如：动态配置内部关系不清晰、有些重点配置参数主从同步配额限流也没有解释清楚，除非去看代码。所以我希望读者通过深入阅读此文，更便捷利用此脚本解决实际运维和开发中遇到的问题，同时也为大家节省学习时间。 3.脚本语法解析 kafka-.
nacos 怎么配置 里的配置ip_2.nacos服务配置中心
weixin_35696071的博客
01-28 5771
下面将研究以下几个问题:nacos的角色: nacos是如何工作的? 在集群中扮演什么样的角色?修改nacos配置数据库: 我们在控制台配置的信息, 默认是写到nacos的默认数据库中, 不方便管理, 因此我们设置一个自己的数据库, 进行管理操作在控制台配置nacos配置nacos配置管理的模型: 基本概念,namespace, group, data id及其用法命名空间的管理, namespa...
解决nacos配置服务ip地址与服务器ip地址不同的问题
weixin_46885935的博客
03-16 1478
【代码】解决nacos配置服务ip地址与服务器ip地址不同的问题。
Webpack配置全解析（基础篇）
最新发布
2401_84435152的博客
04-29 1297
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。配置文件命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；
[Nacos] 业务实例如何指定IP(外网IP)注入Nacos
yyongsheng的博客
10-31 3249
PS：本人使用该方法虽然能注册成功，但是请求是失败的，报错：Illegal character in authority at index 7，本来以为是得到的。使用 Spring Cloud Alibaba 搭建微服务，业务实例默认使用内网 IP 注册到。在 Nacos 客户端指定IP，启动成功后即可以在 Nacos 服务端上看到对应的IP。前后有空格之类的，用了trim方法依然还是报错，有待继续研究。PS：使用此方法完美解决，可以愉快的跨服务器请求了！答：指定外网 IP 注册到 Nacos 上。
基于JSP的数据查询系统——JSP+Mysql完成学生成绩查询web系统
quickefficient的博客
01-11 1454
基于JSP的数据查询系统——JSP+Mysql完成学生成绩查询web系统一、配置环境1. eclipse环境配置2. tomcat的下载安装和环境配置3. eclipse下载插件二、eclipse将项目部署到tomcat上1.配置elipse中tomcat环境2. 运行项目三、连接MySQL数据库1. 在MySQL数据库里建表2. 连接数据库的代码四、运行效果五、总结与参考资料 一、配置环境 1. eclipse环境配置 eclipse 下载与安装就不多说了，详情请参照此处 这个博客关于jdk的配置很详细
webpack的基本原理及手动配置webpack的详细步骤
07-03
这个文档里面记录了手动配置webpack的详细步骤，每个步骤都有相应的说明和截图说明。以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，...
webpack_starter:WEBPACK基本配置文件
05-18
在 `webpack_starter` 中，我们将探讨 Webpack 的基本配置，了解如何安装和启动项目。 首先，让我们从安装开始。Webpack 需要通过 Node.js 的包管理器 `npm` 来安装。在命令行中，进入你的项目目录，然后运行以下...
webpack入门配置.zip
04-15
通过这个压缩包，你可以学习到Webpack的基本配置流程，包括创建`webpack.config.js`文件，设置入口和输出，以及管理项目依赖。在实际开发中，你可能还需要根据项目需求添加更多的loader和plugin，以支持更多的文件...
react-ts webpack配置.zip
05-25
其次，`package.json`是Node.js项目的核心文件，它记录了项目的基本信息、依赖包和脚本命令。在这个React项目中，`package.json`会列出如"webpack"、"webpack-dev-server"、"typescript"、"react"和"react-dom"等...
angularjs-webpack:angularJs基本框架
05-18
**AngularJS 基本框架与Webpack整合** AngularJS，作为一个经典的前端JavaScript框架，由Google维护，主要用于构建单页面应用程序（SPA）。它以其强大的数据绑定和依赖注入特性著称，为开发者提供了构建复杂Web应用...
nacos 怎么配置 里的配置ip_Nacos部署--配置中心
weixin_32373123的博客
01-28 1062
Nacos 0.8部署文档Nacos支持三种类型的部署模式：独立模式 - 在DEV或TEST环境中使用。群集模式 - 用于生产环境以确保高可用性。多群集模式 - 在复杂的生产模式下部署多群集模式以支持不同的业务单位。环境准备在独立模式下运行Nacos；安装并初始化MySQL数据库；安装数据库，版本要求：5.6.5+创建相关用户表，用户以及授权；关闭防火墙、设置 selinux 将SELINUX 改...
分布式RPC系统框架Dubbo-15多注册中心与单功能注册中心
诸般世界
09-16 529
一、多注册中心 根据项目业务的不同需求，会出现需要将不同的服务注册到不同服务中心，例，某些功能需要区域化差异，那么就可以将服务注册到特定区域的注册中心，比如北京用户查询与推荐数据以北京地区为限，那么其访问的就是北京数据仓库，对于其用户请求也就由北京注册中心提供服务；并且相同的服务注册到各个地域的注册中心有利于提高用户体验，那个区域请求对应当前区域的注册中心，响应高效，用户体验好； 常用的场景实现是不同的服务注册到不同的服务中心。 1 创建提供者 （1） 创建工程 ...
【微服务】4、NACOS 配置管理
m0_54189068的博客
03-21 1771
☘️ 进入 nacos 的 conf 目录，修改配置文件 cluster.conf.example（重命名为 cluster.conf）☘️ 将 nacos 文件夹复制多份后分别修改它们的 config 目录下的 application.properties 文件夹中的。📖 Nacos 支持服务列表变更的消息推送模式，服务列表更新更及时（Eureka 只能是定时拉取服务列表信息）🎼 临时实例宕机时，会从 Nacos 的服务列表中剔除；☘️ 修改 nacos 目录下的 conf 目录下的。
Nacos服务端ip地址修改
热门推荐
xieqj_0511的博客
09-16 1万+
nacos服务端指定ip地址
Linux启动nacos成功日志_深入浅出高性能服务发现、配置框架Nacos系列 1: HelloWorld...
weixin_39611031的博客
11-20 381
Nacos是什么？引用官方的介绍，他主要提供以下几个功能点：动态配置服务服务发现及管理动态DNS服务动态配置服务就是通过一个系统，管理系统中的配置项，在配置项需要更新的时候，可以通过管理系统去操作更新，更新完了之后，会主动推送到订阅了这个配置的客户端具体的使用场景，例如，在系统中，会有数据库的链接串，账号密码等配置信息，常规的做法是写在配置文件里面，如果需要修改更新，需要重新打包编译，如果你是分布...
往nacos注册时怎么设置为指定网段地址
goxingman的博客
09-26 253
打开配置文件,在里面加上下面配置。
应用指定注册到nacos的 启动ip
qq_33930506的博客
11-23 1204
nacos ip
docker run 修改springboot nacos IP配置
weixin_42037607的博客
05-16 1374
需要注意的是，环境变量名应该遵循一定的规则，例如把原始配置的 . 替换为 _，并且全部大写。另外，如果你的 Spring Boot 应用和 Nacos 服务器都在同一个 Docker 网络中，那么 Nacos 的地址可以直接使用 Docker 服务名称，而不必是具体的 IP 地址。在 Spring Boot 应用中，使用 Nacos 作为配置中心或服务发现，如果你想在 Docker 中运行并修改 Nacos 的 IP 配置，可以通过环境变量来实现。
项目记录1
08-08
E宠商城项目记录第一章 启动项目create-react-app hello-react(hello-react为项目根目录的名字)删除src的所有东西(个人习

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值