webpack定义及搭建
webpack是一个模块打包工具
ES Module
CommonJS
CMD AMD 等
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
修改默认配置文件
webpack start
网站导航
webpack配置
一个打包工具
npm install --save-dev webpack : 安装Webpack
npm install webpack webpack-cli --save-dev :此工具用于在命令行中运行 webpack
webpack 开箱即用，可以无需使用任何氏毕返配置文件。webpack 会假定项目的入口起点为 src/index.js ，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。
在package.json文件中添加命令，然后通过npm run build即可运行打包
但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件数旁，然后 webpack 会自动使用它。
也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config flag 修改此配置文件名称。
每个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 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
plugins: [
new webpack.DefinePlugin({
'process.env':require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
纳兆 new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
//
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname,'../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
