郑州外贸网站建设公司,沈阳市网站设计公司大全,网页设计规范要求,鄱阳网站建设在上一节webpack零基础入门中我们在安装完webpack 和 webpack-cli依赖之后#xff0c;直接通过npx webpack ./src/main.js --modedevelopment的方式对src下的js文件进行了打包。 其中的 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包#xff0c;不但会打包 main.js直接通过npx webpack ./src/main.js --modedevelopment的方式对src下的js文件进行了打包。 其中的 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包不但会打包 main.js还会将其依赖也一起打包进来。 --modexxx指定模式环境。 ./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 等资源其他资源需要借助 loaderWebpack 才能解析 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以上的版本就好啦
