前言
本人也是刚开始学习webpack的小白，之前在平时的工作中也只是知道一些简单常规的配置，没有一个深入和具体的学习方式，在这次疫情期间决定好好学习一下原理和源码的实现方式。如有错误的地方欢迎指正。（学习方式是在极客时间上观看视频学习的）
为什么使用webpack？
1.社区生态丰富
2.配置灵活和插件化扩展
3.官方迭代速度快
依赖图
image
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简述配置文件
module.exports = {
entry: './src/index.js', // 1.打包文件入口
output:{ // 2.打包文件输出
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{ // 3.loader配置
rules:[
{test:/\.txt$/, user:'raw-loader'}
]
},
plugins:[ // 4.插件配置
new HtmlwebpackPlugin({
template: './src/index.html'
})
],
mode:'production' // 5.环境
}
webpack五个模块的概念以及用法
entry用法
指定打包入口文件
entry: './src/index.js', // 单入口文件 entry是个字符串
entry:{ // 多入口文件 entry是个object 里面的值是key value的形式
app1: './src/index.js',
app2:'./src/app2/index.js'
}
output用法
文件打包后，结果输出磁盘的某个位置
output:{ //单入口文件
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
output:{ //多入口文件 filename参数 通过占位符确保文件名称唯一
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
loaders概念以及用法
首先webpack 只支持js 和json两种类型，像css less sass jsx 字体图片 ... 这些没有办法支持的，这个时候我们就需要用loaders去进行一个处理，他的作用就是将webpack不支持的这些类型转换为支持的类型，然后加入到依赖图当中。
loaders本身是一个函数 参数为原代码，返回一个新的结果。
//把需要用的loader 放进rules数组里
module:{
rules:[
{test:'匹配规则' , user:'loader名称'}
]
}
plugins概念以及用法
plugins用于增加webpack的功能以及优化，作用与整个的构建过程，从构建的开始到结束，都是可以使用的。
plugins: [ ///需要的plplugin 放在这个数组里就可以了
new webpack.optimize.CommonsChunkPlugin({
...
})
]
mode概念以及用法
mode是在webpack4.0提出的一个新的概念，在之前是没有的。
首先它有3个参数，development 、production、none （默认值为none）。
WechatIMG4.png
为node时 不会开启任何优化（最好是设置一下这个值，体验还是比较舒服的）
配置一个简单webpack
1.首先安装webpack ，创建一个空目录执行 npm install webpack webpack-cli --save -dev
2.创建目录
WechatIMG1.png
3.修改webpack.config.js文件
//webpack.config.js 文件
'use strict'
const path = require('path');
module.exports = {
entry: { // 1.打包文件入口 这里配置的是一个多入口文件，单入口文件配置的话 entry是个字符串
app: './src/index.js',
module2: './src/module2.js'
},
output: { // 2.打包文件输出 因为是个多入口文件，所以需要一个[name]占位符, 如果是但入口文件，filename参数可写死
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: { // 3.loader配置 需自己下载loader 可看webpack官网
rules: [
{
test: /.js$/,
use: 'babel-loader'// es6语法解析
},
{
test: /.css$/,
use:[
'style-loader',// 这里需要注意 style-loader 必须要在css-loader，因为loader中会产用链式调用。
'css-loader'
]
},
{
test: /.less$/,
use:[
'style-loader',
'css-loader',
'less-loader', // less解析
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use:'file-loader' ,//图片 字体解析
}
]
},
mode: 'production' // 5.环境
}
4.新增src 目录创建几个js文件，用来做一个最简单的例子
// hellowebpack.js
export function hellowebpack() {
return 'hello webpack'
}
// index.js
import {hellowebpack } from './hellowebpack'
document.write(hellowebpack());
//module2.js
'use strict'
import React from 'react'
import ReactDom from 'react-dom'
import './module2.less'
import headerpng from './images/headerpng.jpeg'
class Modelu2 extends React.Component {
render() {
return <div className="module2-text">
module2 text
<img src={headerpng} alt=""/>
</div>
}
}
ReactDom.render(
<Modelu2/>,
document.getElementById('module2box')
)
//增加less文件
.module2-text{
color: red;
font-size: 20px;
}
//修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
// 这样就可以直接运行npm run build 来进行打包 不在需要进入node_modules下的.bin目录运行webpack
//打包后结果
dist文件新建立一个文件夹，增加一个html文件
WechatIMG1.png
5.打包后的文件预览
WechatIMG1.png
总结
webpack是一个打包模块化js的工具。
entry： 配置入口文件，如果单入口文件，entry就是一个字符串，如果是多入口文件，entry就是一个对象。
output：打包后输出文件，多入口文件，需要一个[name]占位符, 如果是单入口文件，filename参数可写死。
loader：webpack不识别的文件可以通过loader转换。
plugin：可用于扩展webpack功能, 并且从构建的开始到结束，都是可以使用的。
mode: 用于配置webpack环境。参数有三个，production , development 默认值为none。在开发中最好去开启，这样webpack可以自动为我们开启一些优化项。
网友评论