webpack创建项目并打包的详细流程记录
webpack基础设置
1、新建项目
2、在项目中创建两个文件夹 src 和 dist，其中src文件夹用于存放开发时写的js、css等文件，dist文件夹中存放打包后生成的bundle.js文件。
3、确保项目本身安装了node
通过在terminal中输入node -v，查看是否有node的版本号
4、确保项目安装了webpack
通过在terminal中输入webpack -v，查看是否有webpack的版本号
5、可以在terminal中输入：
webpack ./src/main.js ./dist/bundle.js
来将src文件夹下的以main.js作为入口文件的全部文件打包到dist文件夹中的bundle.js中
由于每次都这么写太麻烦，可以配置简单命令来实现。
6、创建webpack.config.js文件
并在文件中写入如下代码：
//去node中找一个叫'path'的包
const path = require('path')
//动态获取绝对路径需要用到node语法
module.exports = {
entry: './src/main.js',//这是入口路径
output: { //output出口需要写成一个类的形式
path: path.resolve(__dirname, 'dist'),//这是动态的获取的绝对路径
filename: 'bundle.js'
},
}用到node就需要npm，在terminal中输入 npm init , 会自动生成package.json，在package.json中添加
即可在terminal中通过输入 npm run build 对代码进行打包。
关于loader
webpack会自动处理js之间相关的依赖,但是在开发中不仅仅有基本的js代码处理，也需要加载css、图片，将ES6转成ES5代码，将TypeScript转换成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。webpack本身不支持上述操作。需要加载loader。
loaders | webpack 中文网 (webpackjs.com)
可以查看webpack的所有loader。
添加对loader的依赖一般都是在terminal中npm install，然后在webpack.config.js文件中添加对其的配置。
关于npm install 包的普遍报错的解决方法：
在包后面加上 --legacy-peer-deps
例如：
与压缩文件相关的学习
UglifyjsWebpackPlugin插件
使用：
terminal中输入：
npm install --save-dev uglifyjs-webpack-plugin@1.1.1 --legacy-peer-deps
webpack.config.js文件中：
const HtmlWebpackPlugin = require('html-webpack-plugin')以及在plugins中：
new UglifyjsWebpackPlugin()
这样可以将bundle.js压缩为一行代码。
总结
到此这篇关于webpack创建项目并打包的文章就介绍到这了,更多相关webpack创建项目并打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
nrm(npm registry manager )是npm的镜像源管理工具,它可以快速在让你在本地源之间切换,下面这篇文章主要给大家介绍了关于npm与nrm两种方式查看源和切换镜像的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于axios和session的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看详细的介绍吧。2017-07-07
随着人工智能技术的发展,越来越多的服务和应用开始集成AI能力以提升用户体验,本文将介绍如何通过Node.js接入DeepSeek提供的API服务,特别是其聊天完成（Chat Completions）功能,为您的应用增添智能对话能力,需要的朋友可以参考下2025-02-02
依赖管理是其中一个至关重要的环节,本文主要介绍了更新npm项目依赖的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
本篇文章主要介绍了浅谈express 中间件机制及实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
node的process以及child_process模块学习笔记
这篇文章主要介绍了node的process以及child_process模块学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
大家对nodejs中的require方法应该不会陌生,这个方法可以用来导入nodejs的内置模块,自定义模块,第三方模块等,使用频率非常高,那么这个方法内部是如何实现的呢?本篇文章就是从头到尾拆分实现流程,最终实现一个自定义的require方法,需要的朋友可以参考下2025-03-03
Puppeteer是一个Node库，本文主要介绍了Node爬虫工具Puppeteer入门教程实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
pnpm workspace管理monorepo项目使用过程详解
这篇文章主要为大家介绍了pnpm workspace管理monorepo项目使用过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了node.js实现简单的压缩/解压缩功能,结合实例形式分析了node.js实现本地文件与服务器端压缩/解压缩相关操作技巧,需要的朋友可以参考下2019-11-11
最新评论