1.是什么
webpack是静态模块打包器,当webpack处理应用程序时,会将所有这些模块打包成一个或多个文件
模块:webpack可以处理js/css/图片、图标字体等单位
静态:开发过程中存在于本地的js/css/图片/图标字体等文件,就是静态的
动态:从远程服务器请求的内容,webpack没办法处理,只能处理静态的
2.entry和output
//webpack.config.js
entry: {
main: './src/index.js',
search: './src/search.js'
},
output: {
filename: '[name].js', //固定写法 会在dist目录下生成index.js和search.js
path: path.resolve(__dirname, 'dist'),
}
3.loader
什么是loader:
loader让webpack能够去处理那些非js文件的模块,如css/图片
babel-loader:使用babel-loader之后就能在webpack中使用babel,
先由babel负责编译js为es5或es3,再由webpack 负责打包
4.plugins
const path = require('path');
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main1: './src/index.js',
main2:'./src/search.js',
},
output: {
filename: '[name].js', //固定写法 会在dist目录下生成main1.js和main2.js
path: path.resolve(__dirname, 'dist'),
},
//多入口就写多new几个,注意要用filename起别名,不然都叫index.html,后面的search.html也变成index.html后就覆盖了
//test.html编译后的index.html
plugins:[
new HtmlWebpackPlugin({
template:'./src/test.html',
filename:'test.html',
chunks:['main1'], //chunks指定test.html要引入的js文件,否则默认是引入全部
minify:{
//删除index.html中的注释
removeComments:true,
//删除index.html中的空格
collapseWhitespace:true,
//删除各种html标签属性值的双引号
removeAttributeQuotes:true,
}
}),
new HtmlWebpackPlugin({
template:'./src/search.html',
filename:'search.html',
chunks:['main2']
})
],
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
]
}
}
css-loader可以帮助webpack认识css,
使用import 导入css,像导入js模块一样
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main1: './src/index.js', //index.js文件有一行代码import '../css/2.css';
},
output: {
filename: '[name].js', //如果没有main1,则默认起main.js
path: path.resolve(__dirname, 'dist'),
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/test.html',
}),
],
module:{
rules:[
{
test:/\.css$/,
// loader:'css-loader',
//同时有多个loader时,使用use,注意:webpack会从右向左执行loader
use:['style-loader','css-loader']
}
]
}
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
entry:'./src/index.js',
// entry: {
// main1: './src/index.js',
// },
output: {
filename: '[name].js', //如果没有main1,则默认起main.js
path: path.resolve(__dirname, 'dist'),
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/test.html',
}),
new MiniCssExtractPlugin({
filename:'css/[name].css', //引入后的css文件位置 dist/css/main.css
})
],
module:{
rules:[
{
test:/\.css$/,
// loader:'css-loader',
//同时有多个loader时,使用use,注意:webpack会从右向左执行loader
// use:['style-loader','css-loader'] //style标签方式引入css
use:[MiniCssExtractPlugin.loader,'css-loader'] //link方式引入css
}
]
}
}
file-loader处理css中的图片
如果是外部的资源,是不需要考虑webpack的,只有本地的图片才需要被webpack处理
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
entry:'./src/index.js',
// entry: {
// main1: './src/index.js',
// },
output: {
filename: '[name].js', //如果没有main1,则默认起main.js
path: path.resolve(__dirname, 'dist'),
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/test.html',
}),
new MiniCssExtractPlugin({
filename:'css/[name].css', //引入后的css文件位置 dist/css/main.css
})
],
module:{
rules:[
{
test:/\.css$/,
// loader:'css-loader',
//同时有多个loader时,使用use,注意:webpack会从右向左使用loader
// use:['style-loader','css-loader'] //style标签方式引入css
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../' //配置css文件中的图片路径前加../
}
},'css-loader'] //link方式引入css
},
{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options:{ //配置css图片的存放位置
name:'img/[name].[ext]' //name不是和上面output一样哦,这里的name是图片原来的名字 ext是扩展名
}
}
}
]
}
}
使用html-withimg-loader处理HTML中的图片
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
// entry: {
// main1: './src/index.js',
// },
output: {
filename: '[name].js', //如果没有main1,则默认起main.js
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/test.html',
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css', //引入后的css文件位置 dist/css/main.css
})
],
module: {
rules: [
{
test: /\.css$/,
// loader:'css-loader',
//同时有多个loader时,使用use,注意:webpack会从右向左使用loader
// use:['style-loader','css-loader'] //style标签方式引入css
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' //配置css文件中的图片路径前加../
}
}, 'css-loader'] //link方式引入css
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: { //配置css图片的存放位置
name: 'img/[name].[ext]', //name不是和上面output一样哦,这里的name是图片原来的名字 ext是扩展名
esModule:false,//html-withimg-loader与file-loader合作,即file-loader将图片复制到img目录里后,html-loader就把
//html中的图片路径改成复制后的位置,但是不需要用到file-loader的es模块导出功能
}
}
},
{
test:/\.(htm|html)$/,
loader:'html-withimg-loader'
}
]
}
}
file-loader 处理js中的图片
file-loader处理图片时,会把图片复制到dist
import './3.css'; //在js中引入css文件
import img from '../images/map.png'; //在js中引入图片文件
console.log(img); //输出图片复制在dist后的位置 这里是img/map.png
const imgEl = document.createElement('img');
imgEl.src = img;
document.body.appendChild(imgEl);
js中导入图片和css中使用图片一样,都是要用到file-loader
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: { //配置css和js图片的存放位置
name: 'img/[name].[ext]', //name不是和上面output一样哦,这里的name是图片原来的名字 ext是扩展名
esModule:false,//html-withimg-loader与file-loader合作,但是不需要用到file-loader的es模块导出功能
}
}
},
通过前期学习了解到处理图片的各种情况
file-loader css img
html-withimg-loader html img
file-loader js img
使用url-loader(功能更全面)处理图片,能够将图片转换为base-64,直接嵌入到HTML中,
减少图片网络请求
在webpack.config.js中file-loader和url-loader只需要配置其中一项就行
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { //配置图片的存放位置
name: 'img/[name].[ext]', //name不是和上面output一样哦,这里的name是图片原来的名字 ext是扩展名
esModule:false,//html-withimg-loader与file-loader合作,但是不需要用到file-loader的es模块导出功能
limit:10000,//10KB 小于10KB的图片转换为base-64,大于10KB的就按file-loader的方式处理(复制到dist目录里)
}
}
},
webpack-dev-server搭建开发环境,每次编写代码都得手动执行webpack的打包命令,这个插件能够自动打包
"scripts": {
"build": "babel src -d dist",
"webpack": "webpack",
"dev":"webpack-dev-server --open chrome"
},
npm run dev 只需要执行一次,以后每次保存都会自动打包,但是不会生成dist目录,上线才需要dist目录,它是放在内存中,