webpack入门配置精讲

最新推荐文章于 2024-03-30 20:52:14 发布
最新推荐文章于 2024-03-30 20:52:14 发布
阅读量194 收藏 2
点赞数
分类专栏： 我的前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36445197/article/details/107955460
版权

1、项目中安装webpack及webpack

yarn add webpack webpack-cli --dev

2、创建webpack配置文件
webpack.config.js

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件

module.exports = {
    // 入口js文件
	entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {},
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

3、package.json中添加快捷指令

"scripts": {
    "build": "webpack --config build/webpack.config.js --mode production"
  }

4、安装热启动服务器

yarn add webpack-dev-server --dev

5、配置热启动服务

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件

module.exports = {
    // 入口js文件
	entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

6、package.json中添加快捷指令

"scripts": {
    "build": "webpack --config build/webpack.config.js --mode production"，
    "start": "webpack-dev-server --config build/webpack.config.js --mode development --open"
  }

7、webpack支持多入口文件打包

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'] ,// 方式二
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
                useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
                https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

8、webpack支持多出口文件打包

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry:{
	    index:SRC_PATH+'/index.js',
    	test:SRC_PATH+'/test.js'
	},
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
                useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
                https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

9、webpack支持自动检索多入口文件打包
首先安装glob

yarn add glob --dev

更改配置文件

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
      var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
      entryFiles[subkey]=file;
})

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry: entryFiles,
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

10、webpack支持自动生成html模版
首先安装html-webpack-plugin

yarn add html-webpack-plugin --dev

更改配置文件

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var htmlWebpackPlugin = require('html-webpack-plugin');
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
      var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
      entryFiles[subkey]=file;
})

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry: entryFiles,
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出，及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目，默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[
   	  new htmlWebpackPlugin({
   	     filename: DIST_PATH+'index.html',//生成后导出的文件路径
   	     title:'测试',//导出文件的标题,
   	     template:path.resolve(__dirname,'../index.html'),//需要参照的html文件路径
   	     inject:true,//body head true,
   	     hash:true,
   	     minfy:true,//是否压缩
   	     chunks:['index']//只动态引入哪些文件配置
   	  })
	]
}

html中动态标题配置

<title><%=htmlWebpackPlugin.options.title%></title>

11、打包提取公共组件
在module.exports 中添加属性

optimization: {
  splitChunks: {
    chunks: 'initial', //async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
    minSize: 10000, // 模块的最小体积
    minChunks: 1, // 模块的最小被引用次数
    maxAsyncRequests: 5, // 按需加载的最大并行请求数
    maxInitialRequests: 3, // 一个入口最大并行请求数
    automaticNameDelimiter: '~', // 抽取出来的文件的自动生成名字的分割符，默认为 ~；
    name: true, // 抽取出来文件的名字，默认为 true，表示自动生成文件名；
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10, // 优先级配置项
        minChunks: 1, // 表示被引用次数，默认为1
        reuseExistingChunk: true
      }
    }
  }
}
逆袭的菜鸟X
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack搭建vue脚手架
Heartbroken_man的博客
08-31 2394
搞了几天的webpack5.0版本搭建vue脚手架项目，今天分享一下！ 在读这篇文章之前你可能需要了解一些webpack的配置才行 否则可能看不懂部分配置 首先我们的项目的src目录结构如下 基本上与vue-cli3的结构一样 ，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构 新增命令行 在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置 "bu
Webpack 配置入门
仗剑天涯，从摘要开始
11-04 286
更新：Webpack4已经发布，本篇是基于Webpack3的，请注意。 更正： 1.package.json中使用了应该使用本地webpack而不是全局webpack。 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dist": "webpack", "bu...
webpack 专题
唐僧的专栏
03-10 338
webpack 专题 ● 什么是 webpack 解决 模块之间的依赖；把 各个模块 安装特定的规则 组织在一起， 最终帮助我们合并 打包成一个 js 文件； 这个过程 一般叫做 模块打包 它的本质是：分析你的项目结构，找到 js 模块 之间的依赖关系，以及一些 拓展语言比...
vue-cli 解决Invalid Host header的问题，，
dakache11的博客
11-09 770
在webpack.dev.conf.js中添加：disableHostCheck: true devServer: { public: 'local.kingsum.biz', clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev....
webpack启动devServer如何直接用IP打开
mutianda的博客
10-08 4464
ps: 在网上很多教程提示把devServer中的host改为：‘0.0.0.0’来进行局域网内ip地址的访问 host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8013, // can be overwritten by process.env.PORT, if port is in use, 删...
webpack无法使用相对路径解决办法
weixin_33991418的博客
04-17 941
webpack无法使用相对路径： 当配置完webpack.config.js，path使用相对路径，如下： 但是，在cmd运行 webpack 时，报如下错误： 所以，解决办法： var path =require('path'); path: path.resolve(__dirname, './bin') 转载于:https://www.cnblogs.com/big...
webpack打包配置
GoodLuck_wu5的博客
06-02 1963
webpack打包配置的步骤
webpack入门配置.zip
04-15
本压缩包提供的内容是针对初学者的Webpack入门配置，通过简单步骤即可创建一个基础的Webpack打包项目。 1. **Webpack 基础概念** Webpack 是一个静态模块打包器，它会将JavaScript、CSS、图片等所有应用到项目中的...
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
webpack基本配置
03-08
Webpack 的核心概念是基于模块化的思想，通过配置文件（webpack.config.js）来定制打包流程。 在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这...
webpack5配置之vue3
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack.config.js配置文件
weixin_30764137的博客
03-16 330
1、基本配置 webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。 //创建webpack.config.js var webpack = require('webpack'); module...
webpack之输出路径处理
热门推荐
coding...
05-05 1万+
前言：本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。最后留了一个问题待解决正文：紧接上文《 webpack之重新认知babel-loader 》项目目录：执行 npm run build之后，查看dist下面打包结果，简直乱作一锅，我们原本src下目录结构规划的很好啊(¬_¬)！优化dist目录目标目录结构：1、安装插件clean-webpack-...
关于路径和上级目录的表示方法
aaff07的专栏
10-27 3300
表示上级目录../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。绝对路径：是从盘符开始的路径，形如 C:/windows/system32/cmd.exe 相对路径：是从当前路径开始的路径，假如当前路径为C:/windows 要描述上述路径，只需输入 system32/cmd.exe 实际
[全文高能] 一文吃透 Webpack 核心原理，看这里
最新发布
2301_82242296的博客
03-30 1023
回顾章节开始时提到的问题：Webpack 编译过程会将源码解析为 AST 吗？webpack 与 babel 分别实现了什么？构建阶段会读取源码，解析为 AST 集合。Webpack 读出 AST 之后仅遍历 AST 集合；babel 则对源码做等价转换Webpack 编译过程中，如何识别资源对其他资源的依赖？Webpack 遍历 AST 集合过程中，识别之类的导入语句，确定模块对其他资源的依赖关系相对于 grant、gulp 等流式构建工具，为什么 webpack 会被认为是新一代的构建工具？
disableHostCheck: true 报错
lx233
03-17 1万+
直接在package.json 里加命令 "serve": "vue-cli-service serve --disableHostCheck=true ",
让vue项目可通过localhost和IP同时访问，又避免启动打开页面为0.0.0.0的尴尬
咘噜biu的博客
09-29 6775
1.首先你需要在config/index.js中修改host为0.0.0.0 module.exports = { dev: { //... host: '0.0.0.0',//将 host设置为 0.0.0.0 port: 9527, //端口号,自定义 autoOpenBrowser: true, errorOverlay: true, no...
VUE 如何配置localhost和IP 都可以访问
kkk_xxx的博客
06-10 4833
可能很多小伙伴都会遇到 老大说要访问你本地的PC/H5链接 PC/H5启的服务链接发给我的问题 希望这篇文档到时候可以帮到你~ 设置成：host: ‘localhost’ 本地IP无法访问 会报下图这个错误 不要慌 正确的配置 是在config/index.js文件中 将 host: ‘localhost’ 改成 host: '0.0.0.0’ 设置 useLocalIp: true, //这个一定要加上 重启ctrl+c结束服务 再重启服务就可以啦 大家可以参考一下 ...
Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错
dkf1799897的博客
03-30 8710
解决 Vue 项目 invalid host header 问题 config 配置 disableHostCheck:true报错
webpack入门与配置解析
"Learning webpack step by step" 这个资源是一个逐步学习webpack的教程，主要讲解了现代前端开发中使用webpack的重要...通过这个教程，开发者可以深入理解webpack的工作原理和配置，从而更有效地管理和优化前端项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值