CSS文件处理问题:
我们引入import “index.css”;
在webpack.config.js配置修改;
module:[
{
test:/\.css$/,
//把use改成数组,添加一个对象,安装并使用,style-loager和css-loader
use:['style-loager','css-loager']
}
]
style-loager和css-loader的作用:
css-loader:帮我们把css文件关系,然后把这些css文件解析合并成一段css。
style-loader:在得到css生成的内容之后,帮我们css挂载到页面的head部分。
如何配置scss和别的css编辑插件:
在webpack.config.js配置修改
module:[
{
test:/\.scss$/,
//把use改成数组,添加一个对象,安装并使用,style-loager和css-loader,scss-loader(安装sass-loader时要再装一个node-sass)
use:[ //执行顺序从下到上,从右到左
//执行顺序 3
'style-loager',
//执行顺序2
'css-loager',
//执行顺序1
'sass-loader',
//postcss-loader的作用,创建一个postcss.config.js配置文件,当使用postcss-loader进行打包的时候,它会使用autoprefixer插件
'postcss-loader'
]
}
]
//postcss.config.js配置,安装 npm i autoprefixer -D
module.exports={
plugins:[
//这样就配置好了postcss要使用的插件,在样式前添加厂商前缀
require("autoprefixer")
]
}
使用plugins让打包更便捷
安装 npm i --save-dev html-webpack-plugin -D
npm i --save-dev html-webpack-plugin -D
使用plugins插件
1.先引入
const HtmlWebpackPlugin=require('html-webpack-plugin');
2.再进行配置
webpack.config.js文件中配置
module.exports={
//添加配置
plugins:[new HtmlWebpackPlugin()]
}
//打包可以使用了,自动生成index.html 把bundle.js引入index.html,
//HtmlWebpackPlugin 会在打包之后自动生成一个html文件,并把打包好的js文件引入到html文件中
/*打包好的html中,没有入口标签*/
在 webpack.config.js中进行配置
module.exports={
//添加配置
plugins:[new HtmlWebpackPlugin({
//template后边放置的是src目录下自己创建一个html模板
template:'src/index.html'
})]
}
//配置好之后重新打包(删除之前打包的dist目录)
//在webpack中plugin的作用,就是在执行到某一时刻帮我们做一些事情。类似生命周期某一个时段。
//常见的两个插件
打包过程中上次的js文件依然存在,我们希望当我们重新打包的时候先把dist目录先删除,再去执行打包,不会出现之前打包的文件
在 webpack.config.js中进行配置
//添加配置安装 npm i clean-wwebpack-plugin -D
const CleanWebpackPlugin=require('clean-webpack-plugin')
module.exports={
plugins:[
//使用,作用是当我们在打包之前删除dist目录下的所有内容。
new CleanWebpackPlugin(['dist'])
]
output:{
//打包之前删除dist目录,再新建一个.js文件
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
}
}
Loader是什么
打包图片模块
import avatar=require("./img.jpg")
console.log(avatar)
module.exports={
module:{
rules:[{
test:/\.jpg$/,
use:{
//使用前先安装,npm i file-loader -D,打包jpg文件,任何形式的文件,获取打包好之后的地址。
loader:'file-loader'
}
}]
}
}
//可以执行打包了,
//打包出两个文件,bundle.js和图片
打包vue文件。
npm i vue-loader -D
import avatar=require("./img.jpg")
console.log(avatar)
module.exports={
module:{
rules:[{
test:/\.jpg$/,
use:{
//使用前先安装,npm i file-loader -D,打包jpg文件,任何形式的文件,获取打包好之后的地址。
loader:'file-loader'
}
}]
}
}
loader就是打包的方案,对于特定的条件,执行相对应的loader。
样式打包补充:
如果给css-loader增加配置项,就要把css-loader改成{一个对象}
module.exports={
module:{
rules:[{
test:/\.scss$/,
use:[
//配置打包vue-loader规则
{
loader:'css-loader',
options:{
//当我们在一个scss引入另一个scss文件,可以加上importLoader,这样保证一次从下至上执行loader正常解析scss文件。
importLoaders:2
}
},
'sass-loader',
'postcss-loader'
]
}]
}
}
//scss文件会作用于当前文件下,引入文件创建的样式继承当前文件下的scss样式。为了不让样式互相影响,我们也有了模块化的概念。
module.exports={
module:{
rules:[{
test:/\.scss$/,
use:[
//配置打包vue-loader规则
{
loader:'css-loader',
options:{
//当我们在一个scss引入另一个scss文件,可以加上importLoader,这样保证一次从下至上执行loader正常解析scss文件。
importLoaders:2,
//使用模块化
modules:true
}
},
'sass-loader',
'postcss-loader'
]
}]
}
}
//引入方式改变成模块引入方式。
import style from "./index.scss"
如何使用webpack打包字体处理文件
iconfont 案例
进入iconfont官网下载图标,是字体对应的图标。
如何打包字体文件
import引入scss文件,然后才能使用这个时候我们不是使用模块化的scss文件所以配置里的配置需要改动
module.exports={
module:{
rules:[
{
//因为我们需要打包使用eot、ttf、svg格式的文件,所以要进行配置
test:/\.(eot|ttf|svg)$/,
use:{
//如果不确定是否安装了file-loader就npm i file-loader -D
loader:"file-loader"
}
},
{
test:/\.scss$/,
use:[
//配置打包vue-loader规则
{
loader:'css-loader',
options:{
//当我们在一个scss引入另一个scss文件,可以加上importLoader,这样保证一次从下至上执行loader正常解析scss文件。
importLoaders:2,
//使用模块化
// modules:true //去掉当前行代码,意思是不适用scss模块化管理
}
},
'sass-loader',
'postcss-loader'
]
}]
}
}