webpack的作用及核心配置(webpack的基本配置)
发布网友
发布时间：2024-09-17 02:28
共1个回答
热心网友
时间：2024-09-17 20:54
webpack是一个模块打包工具
ESModule
CommonJS
CMDAMD等
modules概念modules方法及变量
最开始只是js，现在支持大多数文件类陪橡型样式、图片等
node.js
一芦雀旁、创建package.json
配置
二、安装webpack
webpack-cli安装后可以使用命令行执行webpack的相关命令
不推荐这种方式，因为webpack版本已经岁悄固定了，当你安装了4的版本，就无法启动3的版本的项目，除非卸载然后再安装3版本的webpack
命令行进入到项目中
webpack-v会在全局查找webpack，所以当在项目中安装webpack时，这个命令是没有作用的。npx是在node_modules中寻找webpack
安装指定版本webpack
文件名为webpack.config.js
修改默认配置文件
webpackstart
网站导航
webpack配置一个打包工具
npminstall--save-devwebpack:安装Webpack
npminstallwebpackwebpack-cli--save-dev:此工具用于在命令行中运行webpack
webpack开箱即用，可以无需使用任何氏毕返配置文件。webpack会假定项目的入口起点为src/index.js，然后会在dist/main.js输出结果，并且在生产环境开启压缩和优化。
在package.json文件中添加命令，然后通过npmrunbuild即可运行打包
但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个webpack.config.js文件数旁，然后webpack会自动使用它。
也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用--configflag修改此配置文件名称。
每个html页面都有一个入口点，单页面应用：一个入口起点；多页面应用：多个入口起点
mode?:"development"|"production"|"none";
。。。。。
（webpack提供合理的默认值，但是还是可能会修改一些解析的细节）
条件的输入值由两种，
在条件中，对resource进行匹配的属性有test/include/exclude/resource
在条件中，对issuer进行匹配的属性有issuer
注：当使用歼饥多个条件属性时，需要同时满足，当属性条件为数组时，满足数据中的一个即可
可以对匹配规则的模块进行应用loader或者解析选项对象
oneOf?:RuleSetRule[];
rules?:RuleSetRule[];
webpack配置示例：
webpack五个核心模块表示从哪个文件为入口起点开始打包，分析构建依赖图，可以定义单个或者喊物多个，对应的，可以构建出单页或者多页应用，一般会跟output成对出现。
表示打包后的资源输出到哪里，以及命名规则，对应entry多文件入口的情况写法，如果要支持CJS、UMD、ESM、html页面直接引入，都是在这里通过配置实现的。
这里的[name].js表示出口的文件名和多入口的文件名保持一致，这样的话可以做到不同的页面加载不同的js页面。
因为webpack只能处理js/json资源，不能处理类似css/img等其他资源，所以需要通过loader支持来处理其他资源，以卖渗闹下是常用的loader:
Plugins可以用于执行范围更广的任务，插件的范围包括，从打包优化到压缩，到定义环境变量等，以下是常用的Plugins：
指的是webpack使用中罩相应模式的配置，它有以下两个选项：
（1）development，开发环境，它会默认开启以下选项：
（2）production，生产环境，它会默认开启以下选项：
webpack核心四要素总结入口：webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。
可以通过在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认败氏值为./src。
entry:{
???app:'./src/main.js'
?}
出口：webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个output字段，来配置这些处理过程。
path:打包文察茄散件存放的绝对路径
publicPath:网站运行时的访问路径
filename:打包后的文件名
当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。
output:{
???path:config.build.assetsRoot,
???filename:'[name].js',
???publicPath:process.env.NODE_ENV==='production'
??????config.build.assetsPublicPath
?????:config.dev.assetsPublicPath
?}
Loader：webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。
在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
{
???????test:/\.vue$/,
???????loader:'vue-loader',
???????options:vueLoaderConfig
?????},
?????{
???????test:/\.js$/,
???????loader:'babel-loader',
???????include:[resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]
?????}
插件：插件目的在于解决loader无法实现的其他事。插件是一个具有apply属性的JavaScript对象。apply属性会被webpackcompiler调用，并且compiler对象可在整个编译生命周期访问。
plugins:[
???newwebpack.DefinePlugin({
?????'process.env':require('../config/dev.env')
???}),
???newwebpack.HotModuleReplacementPlugin(),
??纳兆?newwebpack.NamedModulesPlugin(),//HMRshowscorrectfilenamesinconsoleonupdate.
???newwebpack.NoEmitOnErrorsPlugin(),
???//
???newHtmlWebpackPlugin({
?????filename:'index.html',
?????template:'index.html',
?????inject:true
???}),
???//copycustomstaticassets
???newCopyWebpackPlugin([
?????{
???????from:path.resolve(__dirname,'../static'),
???????to:config.dev.assetsSubDirectory,
???????ignore:['.*']
?????}
???])
?]
