这个章节介绍webpack处理js模块
普通模式下，所以ES6的语法，打包后不会做任何转换，这个肯定不符合我们的需要，在低版本浏览器不支持，那么如何转换了，这里用babel来实现.
实验
在index.js中定义如下代码
let sleep = ()=>{
console.log("我是ES6")
}
sleep();
打包后测试
发现没做转换，现在来解决这个问题
//1 安装插件 babel-loader和@babel/core和 @babel/preset-env
//@babel/core 是核心代码库
//@babel/preset-env 转换es6位es5标准语法
cnpm install babel-loader @babel/core @babel/preset-env --save
2:添加配置
在rules里面添加如下配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {//用babel-loader 把es6转换为es5
presets: ['@babel/preset-env']
}
}
},
3：打包测试
看到已经转换成功啦
如果我们继续添加一些es6的高级语法了？
//index.js
class more{
a=1;
}
let mm =new more();
console.log(mm.a);
打包就会报错，提示我们安装一个loader插件
1：好我们来安装一下
cnpm install @babel/plugin-proposal-class-properties --save
2：添加配置
这里有点问题，暂时还没想到好的办法解决，等等
下面讲解一下eslint-loader作为我们js代码规范的校验
1:安装
cnpm install eslint eslint-loader --save
2:去eslint官网下载一个自定义规则的文件，放到根目录下面
3：在webpack.config.js中定义规则
例如
// {
// test: /\.js$/,
// use:{
// loader:'eslint-loader',
// options:{
// enforce: 'pre'
// }
// }
// },
那么如何使用全局变量了？
例如jquery
cnpm install jquery --save
index.js
import $ from 'jquery';
console.log($);
默认webpack打包是一个闭包只执行函数，如果想获取$,挂载在window上面的话，是无法访问的，那么如何解决了？
console.log(window.$);
答案是使用expose-loader
cnpm install expose-loader --save
修改
import $ from 'expose-loader?$!jquery';
打包测试
不用内联loader，用配置文件的方式也是可以的
{
test:require.resolve('jquery'),
use:'expose-loader?$''
},
使用
import $ from 'jquery';
如果不想要要这个配置，默认在所有模块都可以拿到这个全局变量，该如何配置了？
可以用webpack的默认内置提供插件
在plugins添加如下配置
const webpack = require('webpack');
//在每个模块下都注入jquery做为$变量输出
new webpack.ProvidePlugin({
'$':jquery
})
如果jquery我们再外部通过cdn的方式引入了，webpack默认会作为一个内置模块，打包进去，这样输出文件就很大，有没有方法解决了？
答案有的，使用external
external:{ //外部引入 不需要打包
jquery:'$'
},
总的来所有以下3个方式
//jqueryd的引入方式
//1 expose-loader 暴露到widow
//2 providePlugin 给每个人提供一个$
//3 cdn引入 但是不打包
接下来讲解如何打包图片资源
1：在js中动态创建图片
2：在css中通过background引入图片
3：在img中直接写死图片
这里要用file-loader，默认会再内部生成一个图片，到build目录，并且生成的图片地址返回回来
如何实现？
1:安装file-loader
cnpm install file-loader --save
2:定义图片
index.js
import logo from './yk.png'; //把图片引入,返回一个新的图片地址
var img = new Image();
img.src=logo;
document.getElementById("app").appendChild(img)
3:修改配置
{
test: /\.(png|jpg|jpeg|gif)$/,
use:'file-loader'
},
4:打包测试
没问题，接下来用第二个方式css来测试
先定义一个css
body{
div{
background-color: blue;
color:#fff;
border:1px solid green;
p{
width:400px;
height:400px;
background-image: url(123.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 50px auto;
}
}
}
打包测试
ok,成功
第三种方式，用img可以成功引入了？
肯定不行啊，找不到？如何解决
答案是用 html-withimg-loader，中国人写的https://www.npmjs.com/package/html-withimg-loader
1:安装
cnpm install html-withimg-loader --save
使用
{ //处理html中img引入图片打包
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader'
},
大功告成
接下来我们想优化下图片，如果图片比较小就用base64转换一下，如何解决了？
这里用url-loader来解决
1:安装
cnpm install url-loader --save
2：修改配置
{//处理图片 打包 小于300k就用base64,大于就不处理普通打包
test: /\.(png|jpg|jpeg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:300*1024
}
}
},
3打包测试
options:{
limit:300*1024,
outputPath:"img/" //输入图片文件到img目录下面
}
效果图
如何给所有应用的资源图片css添加一个基本路径了？
答案是添加一个publicPath就好啦
output:{ //出口
filename:'bundle.[hash:8].js', //输出文件名称,添加hash,并且只要8位
//__dirname 表示当前目录下 输出文件路径
path:path.resolve(__dirname,'dist'),
//输出公共基准目录添加前缀
publicPath:'http://www.baidu.com'
},
ps：也可以只给图片添加前缀基准目录域名哦，那就只在图片哪里添加就好啦