一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高
一、几个盲点的解释
1、全局安装与局部安装
2、安装包的时候--save与-D的区别
一般我们仅仅是在开发环境依赖的包直接使用-D就可以,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息
npm install webpack webpack-cli -D
--save是会放在package.json文件的dependencies中
记住仅仅是开发环境需要使用的包就使用-D
二、webpack所谓的0配置使用
webpack是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。
1、webpack最基本的基重要的是:
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、在项目下创建一个webpack.config.js文件
2、可以配置的有
const path = require('path');
module.exports = {
entry: '', // 打包文件的入口
output: {}, // 打包后的出口文件配置
devServer: {}, // 开发服务器
module: {}, // 模块配置
plugins: {}, // 插件的配置
mode: 'development', // ['development', 'production']模式
resolve: {}, // 配置解析
}
三、配置开发环境(在内存中打包)
1、安装包
npm install webpack-dev-server -D
2、在webpack.config.js中配置入口文件与出口文件
module.exports = {
entry: './src/index.js', // 打包文件的入口
output: {
filename: 'build.js',
// 注意这个位置必须是绝对路径
path: path.join(__dirname, 'dist')
},
...
}
3、配置开发devServer
module.exports = {
...
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.在webpack.config.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、在webpack.config.js中使用
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['./dist']),
...
],
五、关于webpack入口文件的几种方式
1、单一入口文件(参考上面)
2、多入口文件(可以写成一个数组),共同打包带一个出口文件中
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/a.js'
],
output: {
filename: 'build.[hash:8].js',
// 注意这个位置必须是绝对路径
path: path.join(__dirname, 'dist')
}
}
3、多入口多出口多模板的模式
1.入口文件与出口文件的配置
module.exports = {
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.在webpack.config.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、在webpack.config.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个包可以选择
2、安装包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
3、使用extract-text-webpack-plugin@next插件的方式
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
2.修改module中的加载器
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
]
},
...
3.使用插件
plugins: [
...
new ExtractTextWebpackPligin({
filename: 'css/index.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack测试',
hash: true,
// 先注释下面的代码,更好看结果
// minify: {
// removeAttributeQuotes: true, // 去除双引号
// collapseWhitespace: true, // 合并代码到一行
// }
})
],
4、在index.js中依然是导入css文件
import './css/a.css'; import './css/b.less';
4、使用mini-css-extract-plugin插件方式
1.导包
const MiniCssTractPlugin = require('mini-css-extract-plugin');
2.在module中配置
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
3.配置插件
plugins: [
...
new MiniCssTractPlugin({
filename: 'css/css.css',
}),
]
4.一样的在index.js中导包
5.测试
九、抽取成多个单独的样式文件
1、导包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
2、预先实例化两个输出文件的对象
const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');
3、在module中预先实例化的对象
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
})
}
]
},
4、配置插件
plugins: [ cssExtract, lessExtract, ... ]
5、运行命令npm run build查看
十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上style中)
1.定义disable
const cssExtract = new ExtractTextWebpackPligin({
filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
filename: 'css/b.css',
});
2.在modul中使用
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
})
}
]
},
十一、关于抽取的时候不引入未使用的样式来简单打包后的体积
1、安装包
npm install purifycss-webpack purify-css glob -D
2、导入
const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
3、使用
...
// 注意必须要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
paths: glob.sync(path.resolve('src/*.html'))
})
...
十二、给css3样式加上前缀
1、使用postcss实现该功能
2、安装包
npm install postcss-loader autoprefixer -D
3、配置postcss-loader的加载器
...
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'postcss-loader'},
]
})
},
...
4、项目下新创建一个postcss.config.js的配置文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
5、在a.css中写上css3的样式
body {
background: cyan;
transform:rotate(30deg);
}
6、执行命令npm run build查看生成的文件
十三、关于更多插件的使用请自己搜索,只要你能想到的就能搜索到的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
