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创建项目并打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
windows7下安装nodejs及框架express,从诞生至今一直被热捧,笔者最近也装了个环境打算了解一下。安装步骤简单比较简单,这里分享给大家，希望大家能够喜欢。2015-12-12
这篇文章主要介绍了NodeJS使用七牛云存储上传文件的方法,使用七牛云存储上传文件确认安装node和npm，具体服务器端的云存储操作方法大家参考下本文吧2017-07-07
这篇文章主要为大家介绍了npm install -g 遇到权限问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
开发者对Base64编码肯定很熟悉，是否对它有很清晰的认识就不一定了。实际上Base64已经简单到不能再简单了，这篇文章给大家通过示例代码介绍了node.js对字符串和图片base64编码解码的方法，有需要的朋友们可以通过本文来进行学习，下面来一起看看吧。2016-10-10
本篇文章主要介绍了详解express与koa中间件模式对比，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Nodejs进阶之服务端字符编解码和乱码处理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了Egg框架的功能、原理，以及基本使用方法,结合实例形式较为详细的分析了Egg框架的基本功能、原理、使用方法与相关注意事项,需要的朋友可以参考下2023-04-04
这篇文章主要记录一些 Node.js 应用中的小知识点，如果你 Google/Baidu “Node.js 如何判断文件是否存在” 发现给出的很多答案还是使用的 fs.exists，这里不推荐使用 fs.exists 你可以选择 fs.stat 或 fs.access。2020-08-08
这篇文章主要为大家介绍了nodejs express实现中间件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
因为只是用于本地服务器用于自己测试用，所以不需要太完善的路由功能，所以也就不去使用express框架，而是自己实现一个简易路由，可以针对自己的需求来定制路由功能。2017-03-03
最新评论