前言
webpack是前端工程的一部分,现在的各种前端项目都是用工程化来开发的,除了老顶目,重构老项目都用各种打包工具构重构.
1.概念
webpack是将多个相同后缀打包成1个文件并且可以压缩代码,还可以编译扩展语言,无需手动编译,webpack自动将模块化的代码自动打包进来,成可以在浏览器运行的代码.
2.webpack中重要的两部分plugin和loader
- plugin: 扩展webpack的功能,使webpack具有各种功能.例如打包,压力代码,热更新.
- loader: 主要处理非js模块,将一些css,图片如何打包
🤔webpack刚开始只打包js文件,如果有其它类型的文件webpack处理不来,需要借用loader来处理,而plugin是让webpack具有各种强大的功能
3.开始学习webpack
- 先进入一个文件夹,再 npm 安装webpack,要安装webpack和webpack-cli,.webpack-cli是让webpack生效的命令
3. npm init -y
4. npm -D i webpack@4 webpack-cli@3
内容变成下面这样
- 再package.json文件中写入build命令,效果如下
- 再新建src目录.里面有main.js文件,写入alert(‘webpack’)代码,之后在命令行输入npm run build,看效果如何
可以看到代码被压缩了,想运行要有.html文件才行
4.再新建public目录和index.html文件
webpack是处理不来html文件的,所以要用到plugin
4.plugin
在build目录下新建webpack.config.js文件
这个文件是webpack的配置文件,注意一下,webpack是运行在node上的
4.1. 修改package.json中的命令
先下载能处理html文件的plugin
npm -D i html-webpack-plugin@4
再修改webpack.config.js文件如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', //这是打包模式,有webpack有两种打包模式,一种是开发模式development,另一种生产模式production,如果没有这个选项就默认是开发模式development
entry: path.resolve(__dirname, '../src/main.js'),//这是webpack的入口文件
output: { //这是webpack的出口配置
path: path.resolve(__dirname, '../dist/'),
filename: '[name]_[hash:10].js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html'),//用那个html文件作为打包模板
filename: 'index.html',//打包生成的文件名
})
]
}
运行命令看效果
可以看到打包会自动将js文件引入进去,js代码变成不是压缩的了,运行html看效果如何
正常运行,很好😁
4.2 可以看到每次打包都会生成很多过时的文件,这个时候可以用到clean-webpack-plugin来帮助我们清理文件
npm -D i clean-webpack-plugin
webpack配置如下
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.export = {
//...
plugins:[
//...
new CleanWebpackPlugin()
]
}
运行看效果
可以看到每次打包都会清除上次打包的文件😋 good
5 loader
用过vue/cli的都知道,在main.js中引入css文件,webpack会自动打包css文件,但是webpack只能识别js文件,那css如何处理吗?这个时候可以用到 webpack提供的loader选项处理,loader就相当于翻译官,帮助我们识别css文件,ok👌
npm -D i style-loader@2 css-loader@5
其中style-loader是将打包的css文件以内联样式进行引入到html中
css-lodaer是识别js文件中引入的css语法,例如:import ‘./styles/normalize.css’;
webpack配置如下
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
//.....
}
test表示正则匹配.css后缀的文件, loader无需要引入即可使用,但是要注意:loader中use的规则是从右到左执行的
之后在main.js中引入css文件,再到public中的html文件中随便写点标签
👌build一下看效果如何
可以看到css以内联样式引入进来了😁
5.1处理扩展语言
webpack不仅能处理原生的css,还能处理css的扩展语言,先用less来试一下看看👀
npm -D i less@3 less-loader@5
注意版本问题
webpack配置如下
module.exports = {
//...
rules:[
//...
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
],
//...
}
编写点less
之后在main.js中引入less文件, build一下看效果
可以看到字体变红色了good job😎
5.2 但是可以看到css是由js操作style标签以内联样式引入进来的,这样的话,如果样式多,那一个hmtl就会重,很乱,如果我们想以link引进css吗?应该怎么做?🤔
这里就可以用到webpack提供的mini-css-extract-plugin插件了.行,那先要npm 下载
npm -D i mini-css-extract-plugin@1
再配置一下webpack
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
//...
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
],
},
plugins:[
//...
new MiniCssExtractPlugin({
filename: '[name]_[hash:10].css'// 打包生成的文件名
}),
//...
]
}
将style-loader替换成MiniCssExtractPlugin.loader,这样就可以将内联样式换成外链的形式引入进来了
👌看一下效果如何
可以看到css都以外链的形式引入进来了,不过mini-css-extract-plugin会将所有的css文件合成一个外链引入进来
5.3 postcss-loader的使用
平时书写css都会再加入浏览器前缀以达到兼容目的
npm -D i poscss-loader@3 autoprefixer@8
webpack配置如下
module.exports = {
rules:[
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
})
]
}
}]
}
]
}
其中autoprefixer是postcss的插件,用以自动补全浏览器后缀,在引入autoprefixer插件后要调用传入配置对象,看上面代码既可,想要分离配置也可以在根目录下创建postcss.config.js设来配置
postcss.config.js内容如下
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
})
]
}
build一下看效果如何
可以在network里看到自动帮助我们加入浏览器后缀了,postcss还有很强大的功能可以上官网学习
6.处理图片
网站肯定不止html,css,js.还会有很多其它资源如图片.那webpackj如何处理图片吗?这里可以用到url-loader和file-laoder两种处理文件用的loader.
这两个laoder有什么区别吗?
区别在于当图片大小,小于配置的大小时会以base64形式引入,当大于配置的大小时会交给file-laoder来处理,以链接的形式引入进来
先下载这两个loader
npm -D i url-loader file-loader
webpack配置如下
module.exports = {
module:{
rules:[
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 10, //小于10kB就于base64存在
fallback: { //大于10kB就交给file-loader处理
loader: 'file-loader',
options: {
filename: '[name]_[hash:10].[ext]' // 使用图片的名字，并使用图片的后缀
}
}
}
}
]
}
]
}
}
效果如下
可以看到图片以base64存在,修改一下limit再看一下效果如何
可以看到图片以链接的形式引入
7 webpack的热更新
先下载服务器
npm -D i webpack-dev-server
增加命令如下
配置如下
const Webpack = require('webpack')
module.exports = {
//...
devServer: {
port: 3000, //用WebpackServer开起一个3000端口的服务器
hot: true //起动热更新
},
plugins:[
new Webpack.HotModuleReplacementPlugin(),
//...
]
}
之后可以运行npm run serve会自动打开浏览器窗口,开起一个3000端口的服务.
保存的时候会自动刷新浏览器
8配置开发环境和生产环境的webpack配置
8.1首先要先下载webpack-merge
npm -D i webpack-merge
在build中新建webpack.dev.js和webpack.prod.js文件
将webpack.config.js中的devServer和 new Webpack.HotModuleReplacementPlugin()和mode:‘development’
删除,在dev.js中写
dev.js中的配置如下
const WebpackMerge = require('webpack-merge')
const webpackConfig = require('./webpack.config')
const Webpack = require('webpack')
module.exports = WebpackMerge.merge(webpackConfig, {
mode: 'development', //这是打包模式,有webpack有两种打包模式,一种是开发模式development,另一种生产模式production,如果没有这个选项就默认是开发模式development
devServer: {
port: 3000, //用WebpackServer开起一个3000端口的服务器
hot: true //起动热更新
},
plugins: [
new Webpack.HotModuleReplacementPlugin()
]
})
8.2 webpack.prod.js配置
删除在webpack.config.js中的 new CleanWebpackPlugin(),prod.js配置如下
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const WebpackMerge = require('webpack-merge')
const WebpackConfig = require('./webpack.config')
module.exports = WebpackMerge.merge(WebpackConfig, {
mode: 'production',
plugins: [
new CleanWebpackPlugin()
]
})
👌再配置一下命令
到此完成基本配置.
到webpack的官网上有很多好玩的功能可以去学习,本文章只用于入门webpack学习
结语
如果有什么地方错误可以在评论区指出,感谢各位的阅读!😋
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
