前端页面代码与后端代码在页面请求时不同的是后端代码存放在服务器上，可以很轻易的进行模块化加载，而前端页面还需要向服务器发起请求，之后再发过来，于是webpack就是为了解决这一难题。当然，webpack还提供很多loader可以进行一些预编译的功能。在学习webpack之前必须要会npm,CommonJS,ES6.
(1)webpack的基本语法和工作流程
目标：看得了别人的配置和写的了自己的配置
（2）打包初体验
src/a.js、
export default function a(){
console.log('module a')
}
src/b.js、
export default function b(){
console.log('module b')
}
src/c.js
export default function c(){
console.log('module c')
}
新建dist文件夹
新建webpack.config.js
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}
};
新建src/app.js
import a from './a';
import b from './b';
import c from './c';
a();
b();
c();
新建index.html
<!DOCTYPE html>
<html lang=“en”>
<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>Document</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
(3)webpack插件--帮助我们去做一些内容
npm -D html -webpack-plugin
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
]
};
（4）loader--webpack用来预处理模块的
在一个模块被引入之前，会预先使用loader处理模块的内容
index.html
<!DOCTYPE html>
<html lang=“en”>
<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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
app.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render{
<div>React</div>
document.getElementById('root')
};
r npm -i -D babel-loader bable-core
r npm -i -D babel-preset-react
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
],
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
}
}]
}]
}
};
(5)devServer
r npm i -D webpack-dev-server
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
],
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
}
}]
}]
},
devServer:{
open:true,
port:9000
}
};
(6)引入css样式
r npm i -D css-loader
新建.src/main.css
body{background:red;}
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';
ReactDOM.render{
<div>React</div>
document.getElementById('root')
};
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
],
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
}
}]
},
{
test:/.css$/,
use:['style-loader','css-loader']
}
},
devServer:{
open:true,
port:9000
}
};
(7)引入图片
新建common文件夹
新建img文件夹
编辑.src/main.css
body{background:url("../img/dogs.jpg");}
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
],
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
}
}]
},
{
test:/.css$/,
use:['style-loader','css-loader']
},
{
test:/.jpg$/,
use:['file-loader']
}
},
devServer:{
open:true,
port:9000
}
};
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import './common/style./main.css';
import dog from './common/img/dogs.jpg'
ReactDOM.render{
<div>
<img src="" alt="">
</div>
document.getElementById('root')
};
（9）增强的file-loader:url-loader
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';
import dog from './common/img/dogs.jpg';
import kb from './common/img/3kb.jpg'
import giphy=require('./common/img/giphy.gif');
ReactDOM.render{
<div>
<img src=[dog] alt=""/>
<img src=[kb] alt=""/>
<img src=[giphy] alt=""/>
<img src={require('./comon/img/sc.png')} alt=""/>
</div>
document.getElementById('root')
};
编辑webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
}，
plugins:[
new HtmlWebpackPlugin({
file:'aac.html',
template:'src/index.html'
});
],
module:{
rules:[{
test:/.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
}
}]
},
{
test:/.css$/,
use:['style-loader','css-loader']
},
{
test:/.(jpg|png|gif|jpeg)$/,
use:[{
loader:'url-loader',
options:{
limit:10000
}
}]
}
},
devServer:{
open:true,
port:9000
}
};
(10)引入字体(好用的资源-fontawesome)
main.css
@font-face{
font-family:'f';
src:url('../fonts/fontname')
}
.roket{
font-family：f;
font-size:50px;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';
ReactDOM.render{
<div>React</div>
document.getElementById('root')
};
test:/.(ttf|eot|woff2|svg)$/,
use:['file-loader']
(12)css模块化
test:/.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
module:true,
// localIdentName:'[hash:base64]'
localIdentName:'jkl'
}
},
exclude:[
path.resolve[__dirname,'node_modules'],
path.resolve[__dirname,'src/common']
]
},
{
test:/.css$/,
use:['style-loader','css-loader'],
include:[
path.resolve[__dirname,'node_modules'],
path.resolve[__dirname,'src/common']
path.resolve[__dirname,'src/common']
]
},
(13)使用less和sass
新建main.scss
test:/.scss$/,
use:[
'style-loader',
// 'css-loader',
{
loader:'css-loader',
options:{
module:true,
localIdentName:'[name]-[local]-[hash:bash64:6]'
}
},
'sass-loader']
test:/.less$/,
use:[
'style-loader',
// 'css-loader',
{
loader:'css-loader',
options:{
module:true,
localIdentName:'[name]-[local]-[hash:bash64:6]'
}
},
'less-loader']