1.webpack有什么用?
我的理解:项目越大,所需要的文件也就越多。当我们项目上线以后,不可能将项目的源文件上传。如果我们没有对项目先进行打包,那么我们将会需要很多http请求,使得我们的加载速度变缓慢,用户体验不友好。反之,我们对文件打包后,还保留了单一的模块以及在打包时,打包工具会对我们模块之间的依赖也进行处理。
2.webpack是什么?
理解:webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
3.webpack的五个核心概念?
1)Entry
入口(Entry)指示webpack以那个文件为入口起点开始打包,分析构建内部依赖图。
指示 Webpack 从哪个文件开始打包。
2)Output
输出(Output)指示webpack打包后的资源bundles输出到哪里去,以及如何命名。
3)Loader
Loader让webpack能够去处理那些非javascript文件(webpack自身只理解javascript)
4)Plugins
插件(Plugins可以用于执行范围更广的任务。插件的范围把偶偶,从打包优化和压缩,一直到重新定义环境中的变量等)
5)Mode
模式(Mode)指示 webpack 使用相应模式的配置。
开发模式:development,生产环境 production。
4、准备 Webpack 配置文件
在项目根目录下新建文件: webpack.config.js
const path = require("path");
module.exports = {
//入口---相对路径
entry: "",
//输出---绝对路径
output: {
path: path.resolve(__dirname,"dist"),
//文件名
filename: "",
},
//加载器
module: {
rules: [
//loader 的配置
],
},
//插件
plugins: [],
//模式
mode: "",
}
webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范。