前言
前端技术日新月异的发生着变化,涌现出了很多的框架以UI为主的三大框架(react,vue,angular),与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包,各种可以提高开发效率的新思路和框架层出不穷,但是他们都有一个共同的特点不能够直接运行,必须转换后才能正确运行。WebPack 就是做这件事的,将源代码转换成可以执行的 JavaScript HTML CSS代码。
关于WebPack的内容有很多,我只挑出我常用到的做一下笔记内容,主要有五节内容:
万物皆可webpack:使用webpack 打包常见的文件
React 项目: 打包React的配置
打包优化1
打包优化2: 打包优化分为两节内容,节省打包时间。
多文件打包:多个文件入口如何配置
四大核心
这是我自己总结的四大核心:
entry: 打包的入口文件
**output:**打包后输出文件
**module:**代码转换;如 less 转换为css,静态资源打包
**plugins:**补充modules的不足,webpack本身的大多数特性都使用这个插件接口。这使得webpack更加灵活。
当然了webpack 除了这些还有很多很多十分重要的内容,比如loader,mode,devTool,sourceMap等等,其他内容我们在面都能涉及到。
为什么说这四个是四大核心呢?因为使用这四个内容可以打包我们常见的各种类型文件,接下来我们就试一下吧:
创建项目
在创建项目之前,我们系统需要有node,npm;
再介绍一下npx,在安装npm的时候会自动安装npx,我们安装依赖在本项目中会生成一个node_modules文件夹,使用npx 调用的是本项目的依赖,而不是全局的依赖。
npm init 初始化项目
mkdir webpack-demo
cd webpack-demo
npm init -y
# -y 表示一切默认选择
npm install --save-dev webpack webpack-cli # 可以简写为 npm i -D webpack webpack-cli
# 安装webpack
会在文件夹下生成package.json
创建webpack.config.js 文件 使用npx webpack
就会打包文件,打包配置默认为webpack.config.js,我们创建src 文件夹,所有的文件都在这里面。在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。
开始配置
const path = require('path')
module.exports = {
entry:'./src/index.js',
output: {
filename: '[name].js',
path: path.resolve(process.cwd(), 'dist'),
},
}
# 会在项目里面生成 dist 文件夹,把src下面的index文件打包至dist文件夹下,
# entry: 可以写上面的字符串也可以写成对象如下
module.exports = {
entry:{
main:'./src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(process.cwd(), 'dist'),
},
}
# output: [name]表示entry里面的key,这里就表示main,所以 src 下的index 会打包为main文件,如果entry是字符串默认为main
index.js
const element = document.createElement("div");
element.className = "custom";
element.innerText = "Hello World";
const dom = document.getElementById("root");
dom.appendChild(element)
# 都能看懂
打包
npx webpack
这里的index.html 是我自建创建的,创建完成后把main.js 引入到html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./main.js"></script>
</body>
</html>
打包文件
打包后使用
可以看到我们在js里面写的内容都生效了
使用loader
loader 主要是用来翻译代码的,把代码翻译成浏览器能够运行的源码
上面打包的是js文件所以不需要翻译,如果我们在项目里面用到了图片,less,sass,字体文件呢?
所以就用到了loader,以下loader都需要先安装哦
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(process.cwd(), 'dist'),
},
# 这里只举例less-loader,loader 的读取是从右到左的
module: {
rules: [{
test: /\.css$/i,
use: ['style-loader', 'css-loader'] # css-loader 读取css文件翻译成样式,style-loader把样式生效
},
# less,先把less 文件读取为css 文件,在使用css-loader读取为样式,style-loader 把样式生效
{
test: /\.less$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true // style.className
}
},
'less-loader',
]
}]
}
}
使用plugins
以上的操作都是先把文件打包,然后创建一个html,把打包的文件引入到html文件中。十分的麻烦,所以可以使用plugins,在每次打包的时候都生成一个html文件,并把文件引入,不需要我们自己操作。
plugins:是一个数组
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
# 安装插件 npm i -D html-webpack-plugin
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
template: './index.html' // 使用当前目录的index.html为模板,每次打包把打包后的文件引入到模板文件里面,并打包到dist
}),
]
}
结语
这节简单的说了下webpack的打包配置,是webpack打包的就牛一毛,包括本节内容,我也没有说太多,主要是配置,更多内容还需要查看官方文档,这个只属于一个入门级别的。欢迎查看下节打包配置react项目。