前言
为什么要有webpack构建和打包?
- 更好的模块化管理。webpack支持模块化规范:代码分割成独立模块,并管理模块之间的依赖关系。
- 资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件,减少请求,提高加载性能性能,且webpack支持资源压缩、优化、缓存等处理。
- 转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5,将sass、less、stylus转为浏览器能识别的css代码,将ts转为js等。
- 代码拆分和懒加载。当应用程序变得复杂时,打包文件体积也会变大,导致初始加载时间太长。因此可以对代码进行拆分,按需加载。
- 插件系统和扩展性。Webpack具有强大的插件系统,提供了许多插件和工具,以满足不同项目的需求。
一、webpack基本配置
1.配置拆分和merge
mode表示以什么模式打包;
使用development模式,打包后的代码可阅读,没被压缩;
使用production模式,代码会被压缩。
const path = require('path');
module.exports = {
mode:'development', // production 生产环境
entry:{
app: './src/main.js',
list: './src/main.js'
},
output:{
path.resolve(__dirname, 'dist');
filename: '[name].js'
}
}
开发环境和生产环境是不一样的,为了解决手动改更改mode带来的不便,所以将这些打包配置拆分到不同文件中:
- 通用配置:webpack.common.js
- dev配置: webpack.dev.js
- prod配置:webpack.prod.js
// webpack.common.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={
entry:{
path:path.join(srcPath,'index')
}
}
由于我们拆分了配置,公共的一些配置项不需要在dev和prod里面再去重新写,所以我们需要把webpack.common.js分别和dev,prod建立连接。
这时需要安装webpack-merge
这个插件
npm i webpack-merge -D
安装完成后需要在dev和prod里面分别引入:
// webpack.dev.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')
module.exports=merge(webpackCommonConf,{ // 合并
mode:'development'
})
// webpack.prod.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')
module.exports=merge(webpackCommonConf,{ // 合并
mode:'production'
output:{
filename:'bundle.[contentHash:8].js',
path:path.join(distPath)
}
})
然后修改package.json中的build命令:
"scripts":{
"build":"webpack --config build/webpack.prod.js",
"devBuild": "webpack --config build/webpack.dev.js",
}
生产模式打包:npm run build
开发模式打包:npm run devBuild
2. 启动服务
1)
// webpack.common.js
//首先使用 npm i html-webpack-plugin -D 安装 html-webpack-plugin
// 然后配置入口文件,启动服务后会打包生成html文件
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
plugins:[
new HtmlWebpackPlugin({
template:path.join(srcPath,'index.html'),
filename:'index.html'//打完包以后的文件名称
chunks:["index"] //这里的chunks代表的意思是引入的是哪一个入口文件,我引入的就是src下建立的index.js文件
})
]
}
2)安装 npm i webpack-dev-server -D
// webpack.dev.js 版本4.x
module.exports=merge(webpackCommonConf,{
devServer:{
port:3000,
static:distPath,//根目录
open:true,//自动打开浏览器
compress:true,//启动压缩
//如果需要跨域请求接口
proxy:{
'/api':{
target:'http://localhost:3000'
}
}
}
})
- 配置dev命令,在package.json文件中
"script":{
"dev":"webpack-dev-server --config build/webpack.dev.js"
}
npm run dev启动服务。
3、处理es6,配置babel
对于现代浏览器而言,有些ES6语法是无法被解析的,因此需要babel将ES6解析ES5,这也解决了浏览器兼容性问题。
1)首先安装babel-loader:
npm i babel-loader -D //我这里是^8.0.6版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境
2)在根目录新建.babelrc文件
{
"presets": ["babel-preset-env"],
"plugins": []
}
3)在webpack.common.js中配置babel
module.exports = {
// ...
module:{
rules:[
{
test:/\.js$/,
loader:['babel-loader'],
include:srcPath,
exclude:/node_modules/
}
]
}
// ...
}
4、处理样式
一般也是在webpack.common.js中配置,无论在开发模式还是生产模式都需要处理样式。
1)对于css文件
安装:
npm i css-loader -D
npm i style-loader -D
配置如下:
module:{
rules:[
{
test:/\.css$/,
loader:['style-loader','css-loader']//执行顺序为从后到前
}
]
}
2)对于less等预处理器
安装:
npm i less -D
npm i less-loader -D
配置:
module:{
rules:[
{
test:/\.less/,
loader:['style-loader','css-loader','less-loader']
}
]
}
3)postcss-loader可以做兼容浏览器,有些css语法不是所有浏览器都兼容,postcss-loader就可以帮我们做这些事情。
postcss-loader是一个比较大的插件,里面可以再引入一些别的功能,如autoprefixer:
安装 : npm install postcss autoprefixer
在公共配置文件中配置postcss:
{
test: /\.css$/,
// loader 的执行顺序是:从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
配置autoprefixer,新建postcss.config.js,配置如下代码:
module.exports = {
plugins: [require('autoprefixer')]
}
autoprefixer是一个后处理程序,而可以同sass、stylus或less等预处理器共同使用。它适用于普通的css,无需关心你要为哪些浏览器加前缀,只需关注于实现,并使用w3c最新规范。一般配合postcss一起使用
5、处理图片
对于图片的处理一般分为dev和prod环境下的处理,主要原因是图片一般是在根目录下,打包以后希望全部输出到img文件夹里面,而且需要对图片的大小做一些精细化的配置处理。
对图片的使用有这三种:
- 在html中的src标签中使用
- 在js中import中使用
- 在css中使用,比如背景图片
对于第一种,需要安装html-withimg-loader:
npm i html-withimg-loader -D //^0.1.16
module:{
rules:[
{
test:/\.html$/
use:'html-withimg-loader'
}
]
}
对于第二种和第三种情况:安装file-loader文章来源:https://www.toymoban.com/news/detail-629972.html
npm i file-loader -D
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:'file-loader'
}]
}
webpack.prod.js,在这个文件里对图片做一些精细化配置,需要安装url-loader:文章来源地址https://www.toymoban.com/news/detail-629972.html
npm i url-loader -D
module:{
rules:[{
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:1024*5,//小于5kb的图片会被输出为base64格式
outputPath:"/img/" //全部输出到img文件夹里面
}
}
}]
}
到了这里,关于关于webpack的基本配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!