webpack配置之entry、output、devServer、plugins、resolve、module

本文详细介绍了Webpack的配置,包括入口起点entry,可指定单或多入口;输出配置output,控制编译文件写入硬盘;开发服务器devServer,有端口、热加载等功能;还介绍了插件plugins、解析resolve和模块module,其中模块编译需借助loader。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

module.exports = {
   mode: '',
   entry: '',
   output: '',
   plugins: [],
   module: [],
   resolve: '',
   devServer: {}
}

1.entry

入口起点:用来指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的。

可以通过在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点)。默认为 ./src

一般单入口(单页应用)项目的entry是这个样子的

module.exports = {
   mode: 'development',
   entry: './src/index.js'
}   

用来告诉webpack,从./src/index.js开始进行解析打包

而多入口(多页应用)项目的entry是这个样子的

module.exports = {
   mode: 'development',
   entry: {
      index: './src/index.js',
      home: './src/home.js'
   }
}  

这是用来告诉webpack需要2个独立分离的依赖文件进行起始打包工作

在多页应用中,(译注:每当页面跳转时)服务器将为你获取一个新的HTML文档。页面重新加载新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事情:

   使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建bundle。由于入口起点增多,多页应用能够复用入口起点之间的大量代码/模块,从而可以极大的从这些技术中受益

根据经验,每个HTML文档只使用一个入口起点

2.output

配置output选项可以控制webpack如何向硬盘写入编译文件。注意,即使可以存入多个入口起点,但只指定一个输出配置。

用法:

在webpack中配置output属性的最低要求是,将它的值设置为一个对象,包括filename(用于输出文件的文件名),path(目标输出目录path的绝对路径)

module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
      filename: 'bundle.js',
      path: path.resolve(__diename,'dist')
   }
}  

此配置将一个单独的index.js文件输出到了dist文件夹下,名为bundle.js

多入口起点如何打包?

module.exports = {
   mode: 'development',
   entry: {
      index: './src/index.js',
      home: './src/home.js',
   },
   output: {
      filename: '[name].js',
      path: path.resolve(__diename,'dist')
   }
} 

如果配置创建了多个单独的chunk,则应该使用占位符来确保每个文件具有唯一的名称。

扩展:还可以使用CDN和资源hash

module.exports = {
   mode: 'development',
   entry: {
      index: './src/index.js',
      home: './src/home.js',
   },
   output: {
      filename: '[name].[hash].js',
      publicPath:'http://www.baidu.com/'
      path: path.resolve(__diename,'dist')
   }
} 

3.devServer

devServer的功能有很多,以下列举一些比较常用的:

deveServer: {
   port: 3000,
   open: true,
   host: 'localhost',
   hot: true,
   https: true,
   progress: true,
   contentBase:'./build',
   compress:true,
   proxy: {
      "/api": {
         target: "http://localhost:3000",
         pathRewrite: {"/api" : ""}
      }
   }
}

port:指定要监听请求的端口号

open:是否要打开浏览器

host:使用一个指定的host,默认是localhost,如果希望服务器外部访问,指定为0.0.0.0

hot:启动热加载(需引入插件)

https:默认情况下dev-server通过http提供服务,也可以选择带有https的http/2服务

progress:打包进度条

contentBase:提供的静态资源目录

compress:一切服务都启用gzip压缩

proxy:

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。

请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。

详细解读webpack配置之plugins、resolve、module

4.plugins(插件)

plugins选项用于以各种方式自定义webpack构建过程。webpack附带了各种内置插件,可以通过webpack.[plugin-name]访问这些插件, 这里 获取插件列表和对应文档。但请注意,这只是其中的一部分,社区中还有很多插件

//ex:
module.exports = {
   plugins: [
     new HtmlWebpackPlugin({})
   ]
}

5.resolve(解析)

这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看 模块解析 。

module.exports = {
   resolve:{
      modules:[path.resolve("node_modules"),path.resolve("dist")]
   }
}

6.module(模块)

在webpack中任何一个东西都称为模块,js就不用说了。一个css文件,一张图片、一个less文件都是一个模块,都能用导入模块的语法(commonjs的require,ES6的import)导入进来。webpack自身只能读懂js类型的文件,其它的都不认识。但是webpack却能编译打包其它类型的文件,像ES6、JSX、less、typeScript等,甚至css、images也是Ok的,而想要编译打包这些文件就需要借助loader

loader就像是一个翻译员,浏览器不是不认识这些东西么?那好交给loader来办,它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块,而这些模块想要打包loader必不可少,所以它在webpack里显得异常重要。loader跟插件一样都是模块,想要用它需要先安装它,使用的时候把它放在module.rules参数里,rules翻译过来的意思就是规则,所以也可以认为loader就是一个用来处理不同文件的规则

module.exports = {
   module: {
      rules: [
         {
         	test:/\.css$/,
         	use:['style-loader','css-loader']
         }
      ]
   }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值