前言
Webpack是以js文件为入口打包的，那么项目的css怎么办？如何引入css？
css可以通过js文件引入，但必须使用相应的Loader
1、css-loader，让css可以被js正确的引入；
2、style-loader，让css被引入后可以被正确的以一个style标签插入页面；
3、两者的顺序很重要，要先经过css-loader处理，再由style-loader处理；
安装
cnpm i style-loader css-loader --D
webpack中的配置
js中引入css
import app from './app.css';
import index from './index.css';
document.getElementById('mydiv').setAttribute('class',index.div1);
console.log(123);
页面中引入js
<!DOCTYPE html>
<html lang="en">
<head>
<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="mydiv">hello world</div>
<script src="./dist/app.js"></script>
</body>
</html>
效果图
less 、sass等预处理的编译
1、less，sass是css预处理语言，用来帮助我们更方便的写css；
2、less,，sass浏览器是无法直接识别的，需要编译成css才能被识别，所以我们用less, sass写的文件都要编译；
安装
less:
cnpm i less less-loader --D
sass:
cnpm i sass-loader node-sass --D
sass-loader：直接使用的一个编译loader
node-sass：是sass-loader依赖的一个编译依赖
提取css代码
提取CSS代码作为一个单独的文件，然后link方式引入页面
流程
1、安装对应的插件 extract-text-webpack-plugin；
2、改造loader处的写法 把use改为使用extract-text-webpack-plugin；
3、在plugin处添加 把extract-text-webpack-plugin加入到plugin里；
安装
1、存在版本差异，需要next版本；
2、依赖局部webpack ,需要局部安装一个webpack；
cnpm i extract-text-webpack-plugin@next webpack--S
postcss
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：
1 . 使用下一代css语法；
2 . 自动补全浏览器前缀；
3 . 自动把px代为转换成rem；
4 . css 代码压缩等等；
postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。
autoprefixer使用
cnpm i postcss postcss-loader autoprefixer postcss-cssnext --D
配置位置
要在预处理loader之前，但是css-loader之后
作用
自动补全浏览器前缀
webpack配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// entry:'./app.js',
// entry:['./app.js','./app2.js'],
//这个比较常用
entry:{
app:'./index.js',
// app:['babel-polyfill','./index.js'],
// app2:'./app2.js'
},
output:{
//path是一个绝对路径，如果没有path，则path默认为__dirname+dist
// path:__dirname+'/src/bundle',
// filename:'bundle.js'
//name为entry中的指向key值,hash为默认随机字符串，hash:4为截取前4个
filename:'[name].js'//app.hkgd.js
},
module: {
rules: [
{
test: /\.js$/,
exclude:'/node_modules/',
//use 是使用哪个loader来处理对应的文件
use:{
loader:'babel-loader',
}
} ,
{
test:/\.tsx?$/,
use:'ts-loader',
},
{
// test: /\.less$/,
test: /\.css$/,
// use: [
// {
// loader: 'style-loader',
// options:{
// insert:'#mydiv',
// injectType: "singletonStyleTag"
// }
// }, {
// //css loader一定要写在后面，因为css loader一定要在style-loader前面执行；
// //loader的执行顺序从后往前
// loader: 'css-loader',
// options:{
// //minimize和alias在webpack4中已经移除掉了
// //module在webpack4中重命名为modules
// //minimize:true
// //模块化
// modules:{
// //可以指定类名
// localIndentName:'[path][name]_[local]_[hash]'
// }
// }
// },{
// loader:'less-loader'
// }
// ],
use:ExtractTextPlugin.extract({
//里面配置style-loader
fallback:{
loader: 'style-loader',
options:{
insert:'#mydiv',
injectType: "singletonStyleTag"
}
},
use:[
{
//css loader一定要写在后面，因为css loader一定要在style-loader前面执行；
//loader的执行顺序从后往前
loader: 'css-loader',
options:{
//minimize和alias在webpack4中已经移除掉了
//module在webpack4中重命名为modules
//minimize:true
//模块化
// modules:{
// //可以指定类名
// localIndentName:'[path][name]_[local]_[hash]'
// }
}
},{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:[
require('autoprefixer')({
overrideBrowserslist:[
'>1%'
]
}),
require('postcss-cssnext')()
]
}
},
{
loader:'less-loader'
}
]
})
}
]
},
plugins:[
new ExtractTextPlugin({
filename:'[name].min.css'
})
]
}
效果图
