文章目录
webpack的基础
-
安装
-
全局安装
npm install webpack@版本号 -g npm install webpack-cli@版本号 -g使用全局安装的webpack可能出现的问题： 当多人合作的时候，不同人安装的webpack版本不一样
容易造成版本冲突，不推荐使用全局webpack打包
-
局部安装
npm install webpack@版本号 -D npm install webpack-cli@版本号 -D
-
ps：多次在命令行修改或许有些麻烦，可以把 “webpack --entry ./src/指定目录 --output-path 指定目录”这个操作放在package.json的script脚本节点下面，取一个操作名称再npm run 名称
配置文件：默认是项目根目录下面的webpack.config.js 🍡
----命令行配置 --entry：入口文件 --output-path：输出文件目录 --config ：webpack的配置文件
//在无脚手架的webpack.config.js的配置文件中默认导出一个配置对象
const path = require('path');
module.exports = {
mode: 'development', //用来指定构建模式，可选值还有production
devtool: 'eval-source-map',
entry: './src/index1.js', //指定入口文件
output: {
path: path.join(__dirname, './src/dist'),//node里面的拼接地址
//不拼接可能出现的问题：
filename: 'out.js'
},
devServer: {//这个节点是对webpack-dev-server进行更多的配置
open: true,//打包后自动打开页面
host: '127.0.0.1',
port: '8111'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
alias: {//告诉webpack的@代表的路径
// '@': './src/'
'@': path.join(__dirname, './src/')
}
}
}
webpack里面的插件
webpack-dev-server
1.以前每次修改代码就需要重新webpack打包，这个插件会自动的打包和构建
2.安装之前打包命令是webpack，之后是webpack serve，但是这不是以前的打包，他会把打包好的文件放在内存之中，而不是像以前那样出现一个dist文件夹，因为如果要频繁读写，内存比磁盘快，而默认打包好的js文件在根目录下面，之前的html要引入根目录下看不见的js文件
ps:在webpack-dev-serve4.8版本下，项目根目录默认是public文件夹，（其他版本待测），没有这个文件夹会提示找不到错误
注意webpack-dev-server会启动一个实时打包的http服务
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvW8yBXd-1651289900261)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220427130802173.png)]
配置文件的配置
一般wwebpack只能处理js文件和打包js相关的，不能处理css和一些其他额外的文件，这时候就需要处理器了
在webpack的配置文件中有一个module节点下面rules节点数组
例如css处理器的配置：
module:{
rules:[ //因为可能定义多个规则，一般是数组里面多个规则对象
{
test:/\.css$/,
use:[//因为可能用到多个处理器，所以同样是数组里面多个处理器对象
{
loader:'css-loader'
}
]
}
//简写如下
{
test:/\.css$/,
loader:'css-loader&（多个参数用这个分割）' 或者 use['css-loader']//处理器调用顺序是从右往左
}
]
}
-
入口
默认的入口文件是src目录下面的index.js文件，如果没有配置其他的，没有此文件会报错
-
处理浏览器之间的兼容，一般是对主流浏览器的兼容
. 什么是主流浏览器，可以在caniuse网站上面查看各个版本浏览器的市场占有率
browserslist 这是用来处理主流兼容的，一般在下载脚手架就已经内置了
-
css的兼容
postcss：
1.是什么？ JavaScript 转换样式的工具
有点像less，我们可以用less帮助我们将less文件转化为css，又提供了less-loader代替我们做这个重复的工作，postcss是对于css对于不同浏览器的支持的兼容
基本的webpack的使用首先肯定会对常见的项目里面的文件进行处理
-
对于js以外的文件，webpack会识别不了所以就需要处理器的处理
-
css文件的处理
1.css处理器处理，但是处理后不会显示效果
2.需要style-loader处理，这样可以看到效果
3.对于高级css需要兼容指定占有市场率的需要用到postcss
{ test:/\.css$/, use:[ { loader:'style-loader' }, { loader:'css-loader' } ] } -
对于图片的处理
如果想要将图片作为模块处理的话需要用到file-loader，在webpack5中file-loader为了适配，当require时得到的图片文件不是图片的地址资源而是一个对象
- 对于webpack对于css的引入的问题，当css里面有background的对url的引用，会被当做require处理得到的是一个对象，所以需要在webpack里面配置
-
自定义文件输出的格式：{
loader:'file-loader',
options:{
name:'[name].[hash:6].[ext]', //文件输出的名字格式限制
outputPath:'img' 、//是否把图片或者其他文件放在文件img目录的下面
}
},
区别：
url-loader：01 url-loader base64 url文件当中，减少请求次数
02 file-loader 将资源拷贝至指定的目录，与主要的js文件分开请求
03 url-loader 内部其实也可以调用 file-loader
04 可以增加限制条件，让指定大小的文件转为base-64，超过的转为file-loader相同配置的目录下面
-----------------------------------未完待续
在vue里面的webpack
03 url-loader 内部其实也可以调用 file-loader
04 可以增加限制条件，让指定大小的文件转为base-64，超过的转为file-loader相同配置的目录下面
-----------------------------------未完待续
### 在vue里面的webpack
