webpack基本配置 （lazy_tomato出品）
1.网页有哪些静态资源
-
Js类型文件
.js .jsx .coffee .ts(TypeScript)
-
css类型文件
.css .less .sass .scss
-
Image类型文件
.jpg .png .bmp .svg
-
Fonts文件
.svg .ttf .gif .woff .woff2
-
模板文件
.ejs .art .jade . pug .vue
2.为什么要用webpack
2.1 当我们静态资源过多的时候，网页加载会很慢
原因：
2.1.1 网页加载速度慢=》 因为要发很多的二次请求
2.1.2 要处理错综复杂的依赖关系=》 例如 bootstrap.js就依赖于 Jquery.js
解决办法：
2.2.1 合并，压缩文件，用精灵图，图片用Base64编码
2.2.2 用webpack打包文件 解决各个包之间错综复杂的依赖关系关系
3.什么是webpack？
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
它是基于node.js的（所以要安装node）
4.初步使用
4.1 安装webpack
- 初始化(只要npm下载东西，第一步都是这个)
npm init -y
- 安装webpack
// 安装全局webpack
npm install webpack --global
//安装本地项目模块
npm i webpack webpack-cli -D
[关于-g -S -D的详细解释博客](https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html)
* 这里推荐本地安装，以防因为版本号出bug，而且是开发依赖（上线后不需要）所以加—D
* -D是--save -dev的简写，表示安装的包是在项目开发期间使用（开发依赖），不写默认为在上线期间使用（运行依赖）
* webpack是指安装webpack的核心包
* webpack-cli包含了一些在终端使用的命令
-
文件夹创建
和node_modules同层级创建 文件夹
-
dist (存放以后发布的文件)
-
src （我们本地开发的文件）
-
4.2 不配置任何内容直接使用webpack开始打包
1.src下面创建文件index.js （随便写句话比如 console.log（’lazy_tomato‘)）
2.在终端中直接
npx webpack
//npx是npm5.0之后就自带的一个工具
//敲完这个，打包命令就会成功 dist文件夹就会出现 main.js 它就是我们打包好的js文件
//想要验证是否打包成功 可以安装vscode插件 code Runner, 全选main.js内容 右键Run code
4.3 手动配置 webpack
(由于零配置的webpack,,不能满足我们的需求，所以开始手动配置一下webpack)
1.我们配置webpack,需要在和dist文件夹同级的目录下创建文件 webpack.config.js (这个名字是默认的，后面可以修改)
2.我们开始编写webpack.config.js文件
3.如下代码
首先声明一下，前面提过了，webpack是基于node.js的 所以我们这个webpack.config.js中内容用node的写法
//引入node自带的处理路径的核心模块
const path = require('path')
// 设置导出内容
module.exports = {
// 入口（打包什么文件）
entry: path.join(__dirname, './src/index.js'),
// 出口 （打包后放到哪里去）
output: {
// 出口目录（这个路径必须为绝对路径 用path.resolve 效果一样）
path: path.join(__dirname, './dist'),
// 输出文件名（一般用bundle.js文件）
filename: 'bundle.js'
},
// 模式 ：有两种 默认：production（生产环境） development(开发模式)
// 区别就是，生产环境打包后的代码会压缩，开发模式，代码不会压缩
mode: 'development'
}
4.如果你想改变配置文件的名字 可以用
npx webpack --config 自定文件名.js
5.打包文件要敲很长一串代码，太长了，记不住怎么办 => 去package.json设置脚本
"scripts": {
"build": "webpack"
},
解释一下
- 之前它自己有的 如下代码 可以删掉
"test": "echo \"Error: no test specified\" && exit 1"
-
build 这个名字可以自定义，但是通常取这个名字
-
后面的webpack 意思就是 我们去执行webpack(就是我们下载的wepack文件)
-
如果你修改了配置文件名 可以这样写
"scripts": {
"build": "webpack --config 自定义文件名.js"
},
- 以后再执行打包命令 就不用 npx webpack了，直接用
npm run build
首先解释一下这行代码 用 npm run(去执行) build（这个脚本） （build,可以自定义,run 自定义名字）
切记： 上面的脚本是用npm去执行，不是node
提醒 ：package.json是json文件，json文件几个比较特殊的地方
* **不能写注释**
* **属性和属性名都要有双引号 “ ”**
* **对象中最后的元素，最后，不要有逗号**
4.4 安装启动本地服务的插件 （webpack-dev-server）
-
之前我们去调试，需要手动的打开dist文件夹中的index.html 不方便调试
-
webpack有一个插件 webpack-dev-server 可以自动创建本地服务，（因为现在要开始装各种插件了，多说一句，npm中为了方便和规范，规定所有的包名都是小写的，所以我们安装这个插件，可以自己敲，就是npm i 对应包名 -D (这里的本地服务插件，就是方便我们调试，所以使用本地安装，其他的包按情况设置)）
-
安装 webpack-dev-server
npm i webpack-dev-server -D
-
开始使用这个插件
4.1 简单说一下直接手敲 不配置的话
npx webpack-dev-server
4.2 不配置的话 默认是创建一个本地服务 127.0.0.1:8080
-
不配置太菜了，不方便我们操作，所以还是要配置一下
-
在webpack.config.js 中 和entry相同层级添加代码 适当添加逗号
devServer:{
// 设置本地服务端口号
port:3000,
//显示webpack打包进度
progress:true,
//设置自动打开的初始目录
contentBase:'./dist',
//启动gzip压缩
compress:true
}
- 配置好后 运行
npx webpack-dev-server
-
但是还有问题，此时我们执行这个插件，我还是要敲一大串代码，不开心，和执行webpack一样
在package.json中 scripts 属性下 添加脚本代码
"dev": "webpack-dev-server"]
为了不让大家混淆 我这里贴一下我的代码 此时我的scripts 中是这样的
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
4.5 安装html插件(html-webpack-plugin)
为什么要用这个插件？之前我们dist中的index.html是我们自己创建的，不方便，有了这个插件就可以自动根据模板生成一个HTML文件到内存中
- 第一步安装 顾名思义,直接 i 就好了,同时它也是本地依赖
npm i html-webpack-plugin -D
-
配置这个插件
2.1 在src中创建一个html文件为模板
-
2 首先 在webpack.config.js 文件中
文件顶部 引入我们安装的 模块
-
const htmlwebpackplugin =require('html-webpack-plugin')
和entry同级 添加
//是一个数组 plugin这个单词的意思就是插件 它里面放着以后我们所有配置的插件，其实webpack就是一堆插件堆叠起来的
plugins:[
//new一个实例出来
new htmlwebpackplugin({
//模板html路径
template:path.join(__dirname,'./src/index.html'),
//输出html文件名
filename:'index.html'
})
]
- html-webpack-plugin它有什么作用
-
能够自动引入js文件
-
能够根据指定的模板文件 (index.html),在内存中生成一个新的 index.html,并且在浏览器中打开的页面,就是该插件在内存中生成的页面
-
contentBase : path.join(__dirname,'./src'), dev-server 中的这个也就无效了, 因为会自动打开index.html页面,不需要自己指定了
网友评论