开始
这章我们先把一些css和img给配置了,还有热加载的一些插件。
首先我们先配置控制台的命令,我们每次打包的时候都需要执行webpack这条命令,然后在打包后的文件夹里打开index.html进行预览,我们能不能直接在修改的时候直接在网页上预览呢?当然可以,下面开始配置。
配置devServer
先在控制台执行:
yarn add webpack-dev-server -D
然后去webpack.config.js里配置,注意这里的devServer和module是同级的:
devServer: {
port:8080,//端口号
open:true,//自动打开浏览器
compress: true,//开启gzip压缩
overlay:true,//控制台错误显示在浏览器上
contentBase: path.join(__dirname, "dist"),//指定资源目录
},
然后去package.json里配置,这里的scripts和的devDependencies是同级的:
"scripts": {
"dev":"webpack-dev-server",
"build":"webpack"
},
这样配置完后我们就可以去控制台执行:
yarn run dev
发现浏览器自动弹出窗口,并且浏览器控制台有输出内容了,我们在index.js写一个alert(1);并保存。发现浏览器自动刷新,并弹出1.这样我们就成功配置了devServer。
配置css
我们去src下新建一个index.css,写个background:lightblue,在index.js的顶部引入这个css,
import "./index.css"
然后去控制台执行发现控制台报错:
提示我们需要一个合适的loader来处理css文件。
去控制台执行:
yarn add css-loader style-loader -D
然后在webpack.config.js里配置:
{
test:/\.css$/,
use:[
"style-loader",
"css-loader"
]
}
再去控制台执行yarn run dev,发现浏览器背景颜色已经变成蓝色了,那就成功了。
但是还有,我们在写css3的时候,有时候需要写很多的前缀兼容语法,写多了就烦了啊,这时候我们就需要用到postcss-loader,这个插件可以帮助我们自动加上css的兼容语法。
我们先去index.css里写上:
html,body{
height:100%;
background:linear-gradient(lightsalmon,lightblue,lightcoral);
}
在控制台执行:
yarn add postcss-loader autoprefixer -D
在去webqpck.config.js里配置:
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
{
loader:'postcss-loader',
options:{
plugins:[
require('autoprefixer')({
browsers:['last 5 versions','>0.01%']
})
]
}
}
]
}
然后打开浏览器,我们可以发现,样式的地方变成了这样,已经帮我们加上了前缀(爽):
配置less
配置less的方法和css差不多,先在控制台执行:
yarn add less less-loader -D
再去webpack.config.js里把css的配置复制一份,修改成下面这样:
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
{
loader:'postcss-loader',
options:{
plugins:[
require('autoprefixer')({
browsers:['last 5 versions','>0.01%']
})
]
}
},
"less-loader"
]
},
去src下新建一个index.less文件,在index.js里引入,再写一点less的语法
html,body{
background:lightblue;
#root{
width: 100px;
height:100px;
background: #000;
}
}
在浏览器里进行预览,变成下面这样就成功了。
配置img
再来配置img,我们去index.css里将背景修改成图片:
background:url("./地球.jpg") no-repeat;
打开控制台执行,又发现报错,需要一个合适的loader来处理,执行:
yarn add url-loader file-loader -D
在webapck.config.js里配置:
{
test:/\.(jpg|jpeg|png|gif|svg)$/,
use:{
loader:'url-loader',
options:{
limit:3*1024,//小于3kb使用base64编码
outputPath:'img/',
}
}
}
这里我多配置了一个limit和ouputPath,limit是当图片小于自定义的值时,会转化成base64编码,这样可以减少http的请求来达到优化的目的,ouputPath是将打包后的图片放到img文件夹里。
再打开浏览器,发现图片已经变成背景了。
配置模块热更新
我们前面已经发现,当我们修改了js或者css的内容的时候,浏览器已经可以自动刷新了,那什么是模块热更新呢,就是js或css更改的时候,浏览器不会自动刷新,只会在修改的地方进行更新,这样可以大大提升我们的开发效率。
我们去webpack.config.js里配置:
//在顶部写上
const webpack = require('webpack');
//在plugins里写上
new webpack.HotModuleReplacementPlugin()
//在devServer里加一个
hot:true//加上这个配置
再去index.js里写上:
if (module.hot) {
module.hot.accept()
}
这个时候再打开浏览器,我们可以在js或者css里修改任何东西,保存之后查看浏览器,浏览器不会自动刷新就执行代码了。、
这个时候有的人会发现自己保存之后,浏览器很慢才响应,我们可以去webpack.config.js里写:
mode:'development'
这一行加在entry这个配置的上面,和entry是同级的存在。这个配置代表当前使用的是什么模式,我们暂时先设置为开发模式,后面我们会再修改的。
结尾
现在一些比较杂的配置已经差不多了,我们下面的一些章节的配置就比较关键了。