webpack.config.js基础配置(五大核心属性) |
您所在的位置:网站首页 › webpack五大核心概念 › webpack.config.js基础配置(五大核心属性) |
在上一节webpack零基础入门中我们在安装完webpack 和 webpack-cli依赖之后,直接通过npx webpack ./src/main.js --mode=development的方式对src下的js文件进行了打包。 其中的 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包,不但会打包 main.js,还会将其依赖也一起打包进来。 --mode=xxx:指定模式(环境)。 ./src/main.js就是webpack的打包入口文件,–mode是指定打包的模式, 这些东西其实我们可以在webpack.config.js中配置,配置好了之后,我们只需要执行 npx webpack 就能打包了,不用那么长的命令。 一、准备 Webpack 配置文件在项目根目录下新建文件:webpack.config.js 如图: Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范 图中的五个属性,就是webpack的五大核心概念 entry(入口) 指示 Webpack 从哪个文件开始打包 output(输出) 指示 Webpack 打包完的文件输出到哪里去,如何命名等 loader(加载器) webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析 plugins(插件) 扩展 Webpack 的功能 mode(模式) 主要有两种模式: 开发模式:development 生产模式:production 二、 修改 Webpack 配置文件 // Node.js的核心模块,专门用来处理文件路径 const path = require("path"); module.exports = { // 入口 // 相对路径和绝对路径都行 entry: "./src/main.js", // 输出 output: { // path: 文件输出目录,必须是绝对路径 // path.resolve()方法返回一个绝对路径 // __dirname 当前文件的文件夹绝对路径 path: path.resolve(__dirname, "dist"), // filename: 输出文件名 filename: "main.js", }, // 加载器 module: { rules: [], }, // 插件 plugins: [], // 模式 mode: "development", // 开发模式 };修改好之后我们删除项目目录下上次打包好的dist文件夹,执行以下命令重新打包: npx webpack 看到新增了dist目录,且有main.js文件代表打包成功了,然后我们再重新执行public目录下的index.html文件,如图: 控制台还是打印了两个函数的调用结果。 说明我们配置是生效的,当然目前的一些配置都是最基本,只能处理js文件,还不能处理css,图片等资源,这里只是还原一下上节中默认配置效果。 再提一句,如果你执行npx webpack出现如下图所示的报错,是你的node版本太低了,安装16.X以上的版本就好啦 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |