一、什么是webpack? 作用有哪些?
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
作用:
1、模块化,让我们可以把复杂的程序细化为小的文件;
2、类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
3、Scss,less等CSS预处理器
二、webpack与gulp、Grunt的区别
webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,
不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
三、webpack打包流程
webpack是建立在module之上进行打包的
css js img 都叫做module模块
原本index.js可能依赖各种js文件,经过打包之后 ,就变成一个单独的文件(app.js),凡是匹配test的文件,就使用相对应的loader进行打包
四、webpack基本使用
1、全局安装webpack npm install webpack -g
2、查看版本号 : webpack -v
3、查看全局安装过哪些模块:npm list -g --depth 0
4、局部安装webpack : npm install webpack --save-dev
5、基础的打包方式 webpack 文件名 生成文件名
温馨提示:webpack4.0以上版本坑比较多,新手建议安装4.0以下版本
1、卸载默认: npm uninstall webpack
2、全局安装: npm install [email protected] -g
3、局部安装: npm install [email protected] --save-dev
五、如何打包文件?
1、在当前文件夹下命令行输入npm init -y 生成一个node包
2、局部安装webpack 前提全局已经安装完毕
3、建立webpack.config.js
4、配置webpack.config文件
5、具体操作步骤
引入path模块
写导出模块
搭建项目的工作流程
配置路径
路径配置好之后就可以书写module.exports模块的入口文件和出口文件了
在index .js文件中写一句console.log(11)然后进行打包
4.0之前的打包方式 直接在命令行输入webpack
4.0之后不再支持这种打包方式
打包完成后自动增加dist文件夹
扫描二维码关注公众号,回复:
3431437 查看本文章
六、html-webpack-plugin 插件的使用,有利于快速搭建项目
1、安装:cnpm install html-webpack-plugin
2、引入模块: const htmlWebpackPlugin = require("html-webpack-plugin");
3、在module.exports中的plugins中配置文件
plugins:[
new htmlWebpackPlugin({}) 其中参数是一个对象
]
有两个必填参数 //模板文件
template:'index.html',
//生成的文件名称
filename:"[hash].html"
七、模块与模块之间的关系,配置如何进行打包
css文件打包的顺序是从右至左,从下至上