新⼿快速上⼿webpack4打包⼯具的使⽤详解
⼀直使⽤webpack，上次也分享过webpack配置es6~9的语法参考链接，但是对于⼀些⼩⽩童鞋来说，最基本的配置都不太知道，刚好利⽤春节休假期间对webpack4的知识点梳理⼀次。⽅便⼀些刚刚⼊⾏的⼈学习，也是对⾃⼰的⼀种总结与提⾼
⼀、⼏个盲点的解释
1、全局安装与局部安装
webpack打包流程 面试对于⼀般的新⼿都有⼀个疑惑我是全局安装还是本项⽬中安装(局部安装)，个⼈建议，现在前端发展那么快，我们使⽤局部安装的⽅式更好(使⽤最新的技术栈)。
我们知道javascript是弱语⾔，有局部变量和全局变量，其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。
2、安装包的时候--save与-D的区别
⼀般我们仅仅是在开发环境依赖的包直接使⽤-D就可以，这样就会在项⽬的package.json⽂件中的devDependencies新增相关的配置信息
npm install webpack webpack-cli -D
--save是会放在package.json⽂件的dependencies中
记住仅仅是开发环境需要使⽤的包就使⽤-D
⼆、webpack所谓的0配置使⽤
webpack是基于配置的前端脚⼿架，在实际项⽬中开发需要配置你需要的插件与加载器。
1、webpack最基本的基重要的是:
plugins：配置插件的
module：主要配置⼀些加载器
2、初始化项⽬
创建⼀个⽂件夹webpack-demo
初始化⽣成package.json⽂件
npm init --yes
3、安装webpack最基本的依赖包
npm install webpack webpack-cli -D
4、创建⼀个⽂件夹src并在⾥⾯创建⼀个index.js的⽂件
5、在命令⾏中运⾏(先忽视警告信息)
npx webpack
6、在⽣成的dist⽂件夹下会⽣成⼀个⼤包好的main.js⽂件，在该⽂件夹下创建⼀个index.html⽂件引⼊main.js，在浏览器中查看控制台是否输出信息。
⼆、webpack的配置
1、在项⽬下创建⼀个fig.js⽂件
2、可以配置的有
const path = require('path');
entry: '', // 打包⽂件的⼊⼝
output: {}, // 打包后的出⼝⽂件配置
devServer: {}, // 开发服务器
module: {}, // 模块配置
plugins: {}, // 插件的配置
mode: 'development', // ['development', 'production']模式
resolve: {}, // 配置解析
}
三、配置开发环境(在内存中打包)
1、安装包
npm install webpack-dev-server -D
2、在fig.js中配置⼊⼝⽂件与出⼝⽂件
entry: './src/index.js', // 打包⽂件的⼊⼝
output: {
filename: 'build.js',
// 注意这个位置必须是绝对路径
path: path.join(__dirname, 'dist')
},
...
}
3、配置开发devServer
...
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 8000,
compress: true, // ⾃动压缩
open: true, // ⾃动打开浏览器
},
}
4、在package.json中配置命令
.
..
"scripts": {
"dev": "webpack-dev-server",
},
...
5、调试性的运⾏命令(会⾃动打开浏览器，但是⾥⾯没任何信息展⽰) npm run dev
6、使⽤html-webpack-plugin⾃动⽣成html页⾯的插件
1.安装包
npm install html-webpack-plugin -D
2.在fig.js中引⼊
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.在plugins中配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack测试',
})
],
4.关于index.html的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
</body>
</html>
5.关于html-webpack-plugin的配置
6、运⾏npm run dev直接打开浏览器，打开控制台可以查看到打印信息
7、创建打包命令(在package.json中添加命令)
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
8、使⽤哈希值的⽅式创建随机⽣成数字，解决缓存的问题
1、对⽣成的js⽂件⽣成随机数
output: {
filename: 'build.[hash].js', // 默认⽣成20位的哈希值
// filename: 'build.[hash:8].js' 可以定制⽣成多少位的随机数
// 注意这个位置必须是绝对路径
path: path.join(__dirname, 'dist')
},
2、对html⾥⾯引⼊的js⽣成哈希值(会⽣成?哈希值)
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack测试',
hash: true,
})
],
3、运⾏命令npm run build可以查看dist⽂件夹下的⽂件是否带了尾巴(注意点：要更新⽂件打包会⽣成新的，如果没改动⽂件，仅仅是多次打包是⼀样的)
4、运⾏后的效果
<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>
9、关于html-webpack-plugin其它常⽤的配置
new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true, // 去除双引号
collapseWhitespace: true, // 合并代码到⼀⾏
}
})
四、清除之前的plugin的插件的使⽤
我们对每次打包后的缓存⽂件进⾏删除确保每次都是最新的
1、安装
npm install clean-webpack-plugin -D
2、在fig.js中使⽤
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['./dist']),
...
],
五、关于webpack⼊⼝⽂件的⼏种⽅式
1、单⼀⼊⼝⽂件(参考上⾯)
2、多⼊⼝⽂件(可以写成⼀个数组)，共同打包带⼀个出⼝⽂件中
mode: 'development',
entry: [
'./src/index.js',
'./src/a.js'
],
output: {
filename: 'build.[hash:8].js',
// 注意这个位置必须是绝对路径
path: path.join(__dirname, 'dist')
}
}
3、多⼊⼝多出⼝多模板的模式
1.⼊⼝⽂件与出⼝⽂件的配置
mode: 'development',
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
filename: '[name].[hash:8].js',
path: path.join(__dirname, 'dist')
}
}
2.模板的配置(需要注明输出⽂件的名字)
...
plugins: [
new CleanWebpackPlugin(['./dist']),
new HtmlWebpackPlugin({
filename: 'index.html', // 注明打包后的⽂件名
template: './src/index.html',
title: 'webpack测试1',
hash: true,
chunks: ['index'] // 注明选择哪个js⽂件
}),
new HtmlWebpackPlugin({
filename: 'a.html',
template: './src/index.html',
title: 'webpack测试2',
hash: true,
chunks: ['a']
})
],
}
...
六、webpack热更新的使⽤
1、根据上⾯的⽅式我们可以实现，修改js代码浏览器会刷新，但是是类似我们⼈⼯的刷新(如果是有状态机的数据的时候会丢失数据)
2、我们可以使⽤webpack⾃带的⼀个热更新的插件
3、使⽤⽅式
1.在fig.js中配置
const webpack = require('webpack');
...
plugins: [
new webpack.HotModuleReplacementPlugin(),
...
]
...
2.在主要的⼊⼝index.js⽂件中加上
if (module.hot) {
module.hot.accept();
}
七、配置加载css样式的
webpack默认是⽀持js的，对于别的css或者typescript必须要安装加载器
1、安装包
npm install style-loader css-loader less less-loader -D
2、在fig.js中的module配置规则(use中是⼀个数组，从后⾯解析到前⾯)
...
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
}
]
},
...
3、在src中创建⼀个css的⽂件夹,⾥⾯创建a.css和b.less⽂件
4、在index.js中引⼊样式⽂件
import './css/a.css';
import './css/b.less';
5、启动服务，查看浏览器Elements栏
⼋、抽取成单独的⼀个样式⽂件
上⾯的⽅式虽然可以加载样式⽂件，但是加载出来的全部的以<style type="text/css">....</style>的⽅式到页⾯中，增加了js⽂件的体积，如果项⽬⼤，可能会造成js⽂件过⼤加载慢，甚⾄加载不出的弊端。
1、抽取单独的css⽬前主要有2个包可以选择
使⽤插件extract-text-webpack-plugin@next
使⽤插件mini-css-extract-plugin(今后取代上⾯那个插件的包)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。