webpack基础入门

什么是webpack?

webpack是前端一个项目构建工具，它是基于node.js开发出来的一个前端工具

构建工具有哪些？

1.Gulp,是基于task任务的

2.Webpack，基于整个项目进行构建的

使用webpack这个前端自动化构建工具，可以完美的实现资源的合并，打包，压缩，混淆等等很多功能

开始使用webpack打包构建

在项目目录（不要带中文，会报错）运行 npm init -y 初始化项目
创建项目基本目录结构
因为浏览器不识别es6语法，import $ from 'vue'所以我们使用webpack进行语法转换，输入命令 webpack src/main.js --output dist/bundle.js

webpack安装

在项目的根目录运行 npm i webpack webpack-cli -D 安装webpack和webpack-cli 到项目依赖中

使用webpack配置文件简化打包命令

在项目根目录创建一个webpack.config.js
webpack需要指定入口文件和输出文件的文件路径,所以我们需要在webpack.config.js中配置这两个路径

webpack实现实时打包构建

1.因为每次修改代码，都需要手动运行打包命令，十分不便捷，所以我们可以使用webpack-dev-server来实现实时打包编译，当修改代码的时候，就可以自动打包

2.运行npm i webpack-dev-server --save-dev安装到开发依赖

3.安装完成以后，在package.js文件中的scripts节点下添加一个"dev":"webpack-dev-server

4.运行 npm run dev就可以得到一个自动打包的环境

5.webpack-dev-server会在根目录的内存中给我们生成一个bundle.js，然后index.html页面引入的文件，就应该变成 /bundle.js

6.在package.json配置文件中加入 "dev":"webpack-dev-server --contentBase src --port 3000 --open可以直接打开网站，并且指定端口号
7.通过webpack.config.js修改webpack-dev-server选项

使用html-webpack-plugin插件配置启动页面

1.运行npm i html-webpack-plugin --save-dev安装到开发依赖

2.修改webpack.config.js配置文件：详情看配置文件

3.html-webpack-plugin插件会自动把bundle.js引入到页面中去,然后我们就可以把index.html页面中的引入标签删除掉了

使用webpack打包css文件

1.运行npm i style-loader css-loader --save-dev
2.修改webpack.config.js配置文件,在module节点中加入配置项，详情请看配置文件
3.注意：use表示使用那些模块处理test所匹配到的文件，use 中loader调用顺序是从后往前调用

使用webpack打包scss文件

1.运行npm i sass-loader node-sass --save-dev
2.配置use使用 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

加载图片或者文件或者字体

1.运行 npm i url-loader file-loader -D,file-loader是不需要配置,但是url-loader依赖于file-loader所以必须下载
2.配置webpack.cocnfig.js，在moudle加上这行代码: {test:/\.(jpg|png|gif)$/,use:'url-loader'}
3.如果想取消base64编码，可以在use配置项后面加上参数:url-loader?limit=100&name=[hash:8]-[name].[ext]
4.其中limit这个参数：值就是图片的大小，单位是byte,如果引入的图片大于或者等于limit值，则不会被转换成base64编码格式， name=[hash:8]这个参数，其中hash:8 的值就是hash加密后所取得截取值。 [name]代表图片原来的名称,[ext]代表图片原来的后缀
5.这里的hash加密是根据图片本身加密的，并不是根据图片名称加密