一.定义
webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependencygraph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。
静态模块 : 指的是编写代码过程中的,html,css,is,图片等固定内容的文件.
打包:把静态模块内容,压缩,整合,转译等(前端工程化)
- 把less/sass 转成 css 代码
- 把 ES6+降级成 ES5
- 支持多种模块标准语法
二.体验Webpack打包过程
- 初始化项目 yarn init -y 或者 npm init -y
- 安装依赖 webpack、 webpack-cli(命令行工具,有了这个就可以往终端中使用webpack命令)
- 在项目中创建 src 目录,然后编写代码(index.js)
- 执行 yarn webpack 来对代码进行打包(打包后观察dist目录)
在一个写好的项目的根目录终端中输入命令下载webpack
npm i webpack webpack-cli --save-dev
成功后查看目录中的package.json文件中的scripts配置项中的build配置
如果没有则自己配置上build,不过这个build是自定义名字,如果自动生成有build就不用管了,没有则写上build,值为webpack就行。
最后执行打包命令:
npm run build
成功后会在目录中生成一个dist文件里面就是打包压缩好的项目
这就是压缩文件的简单实现步骤了。
三.打包的另外配置(webpack.config.js):
修改webpack打包的入口和出口:
webpack默认的入口是 ./src/index.js 文件
webpack默认的出口是 ./dist/main.js 文件
比如我们把入口设置成一个src下的login文件夹下的index.js,出口设置成dist文件夹下的index.js操作如下:
首先找到根目录下的webpack.config.js文件,如果没有就自己新建一个名字不能随便起在里面编码:
const path =require('path');
module.exports ={
// 模式(生产模式) development--开发模式
mode:"production",
// 入口
entry:path.resolve(__dirname,'src/login/index.js'),
// 出口
output:{
path: path.resolve(__dirname,'dist'),
filename:'my-first-webpack.bundle.js',
},
// 加载器配置,打一些css,less等文件
module:{
rules:[
text:/\.css$/i,
use:["style-loader","css-loader"]
]
}
};
对于前端开发人员在学习过程中会这些就够用了,需要的话再自己深入文了解。
给个关注呗兄弟们!!!