Webpack
1. 什么是webpack？
打包，压缩各种静态资源的工具(css,js,图片，图标等)
2.目的
性能优化
减少浏览器向服务端请求的次数
节约服务器的的带宽资源
3.如何使用
介绍
webpack是基于Nodejs的，
webpack是运行在Nodejs环境下的
webpack将各种静态资源整合在一起
JS
.js .jsx .ts .coffee
CSS
.css .less .scss .styl
image
.png jpeg .jpg .gif .svg .psd .ico
font
.ttf .woff
安装webpack
先全局安装webpack
1.npm init -y
2.npm i -g webpack(只需安装一次，因为是全局)
3.npm i [email protected] -D（将模块添加到package.json文件到devdependencies（开发依赖）中这一项去）
打包js
Index.html
在package.json文件中script项配置一个命令
1"build":"webpack 要被打包的js文件 目标js文件（打包到哪里去） --watch"
-watch 监听
当要被打包的文件一发生变化，自动产出build.js,无需手动
若不写--watch，则不会监听，需手动再执行一次npm run build
Eg:
"scripts": {
"build":"webpack ./main.js ./build.js --watch"
},
2. 可以通过配置webpack.config.js 来设置其的入口文件和出口文件以及是否监听
webpack.config.js
module.exports = {
watch:true,//是否监听
//入口文件
entry:'./main.js',
//出口文件
output:{
filename:'./build.js'
}
}
package.json
"scripts": {
"build":"webpack"
}
也可以不在webpack.config.js配置监听
webpack.config.js
module.exports = {
//入口文件
entry:'./main.js',
//出口文件
output:{
filename:'./build.js'
}
}
package.json
"scripts": {
"build":"webpack --watch"
}
在其里面使用模块语法（es6）
导出/对外暴露模块并在另一个文件引入
法一
export 导出/对外暴露模块
import {名字} from '要导入的文件
模块：
export let a=100;
export let b= 200;
引入模块的文件
引入
Import {a,b} from ‘模块文件’;
使用
Console.log(a,b)
法二
export default 变量/函数/对象
import 名字 from '要导入的文件路径'
模块：
let c = 300;
export default {
add(...arrs){
return arrs.reduce((init,next)=>init+next)
},
c
}
引入模块的文件
引入文件
Import myMath from ‘模块文件’;
使用：
Console.log(myMath.c)
myMath.add(10,30)
若同时都有
import * as 别名 from '要导入的文件路径'
对于export default:
别名.default 取到值
别名.变量名/函数名 取到值
export default {
add(...arrs){
return arrs.reduce((init,next)=>init+next)
},
c
}
export let a=100;
export let b= 200;
引入模块的文件
引入
Import * as myMath from ‘模块文件’;
使用
Console.log(myMath.a,myMath.b)
myMath.default.add(200,100);
打包css/less/scss/styl(含图片)文件
webpack实际只能打包js文件，所以要打包css需将css文件引入入口文件（eg：main.js），
并在配置文件中配置一些东西。（css则无需在html文件中用link引入了，eg：index.html）。
因其只能打包js,所以是在打包js的基础上打包css，打包js的相关配置是需要的
Index.html文件
<body>
<div id="box">
哈哈哈哈
</div>
<script src="./bulid.js"></script>
</body>
package.json
"scripts": {
"build": "webpack --watch"
}
main.js（入口文件）
引入css/scss/less/styl文件
import './common/css/style.css';
import './common/css/style.less';
//引入scss
import './common/css/reset.scss'
//引入
import './common/styl/co.styl';
//若想在这添加背景图(在配置文件里已经进行了相关配置，所以可以直接在css/scss/less/styl里直接使用图片)
$('body').css({
backgroundImage:url('./common/img/8579.jpg')
})
/*
import imgObj from './common/img/8579.jpg';
$('body').css({
backgroundImage:`url(${imgObj})`
})
*/
webpack.config.js(配置文件)当然你在这里用到的包，需要去下载
module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
filename:'./bulid.js'//此文件名可以随便起
},
module:{
loaders:[{
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
},{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'
},
{
test:/\.styl$/,
loader:'style-loader!css-loader!stylus-loader'
},
//图片的相关配置
{
test:/\.(png|jpe?g|gif|psd|svg|icon)$/,
loader:'url-loader'
}
]
}
}