Webpack4-对支持Css/Less/Sass

那么咱们写一个页面除了有JS文件意外咱们还会引入不少的CSS文件，以及咱们还会编写less文件scss文件等。

那么本省咱们的webpack默认只能处理 .js 的文件，也就是这些其余的文件咱们需用经过第三方的loader才能处理。

那么咱们先在以前的项目中添加一个css文件,而后在index.html文件中将他引入。

 

 

 

这是页面渲染出来的结果,那么咱们看到这样引入确实是没有问题！也可使用！

 

可是咱们使用的是webpack，而webpack能够帮咱们减小页面对服务器发起屡次请求的问题，若是咱们这样写的话那么页面就会想服务器发起一次请求。这样咱们就和没有使用webpack同样没有区别了！

---

那么咱们来看下载webpack下要如何引入css文件！ 那么咱们打开 index.js 文件，在该文件下加入以下代码

import './index.css' （后门跟的是文件的路径，包过less和scss文件也是这样引入）

ok！这样引入之后咱们就只须要在 index.html 文件中引入一个 index.js 文件便可。

注意有坑：那么我前面说过webpack要打包js文件，可是他只支持打包js文件，那么咱们这样引入的css文件是不起做用的，并且也不会打包成功

那么要怎么办呢？咱们这个使用就须要使用第三方的loader才能完成编译

---

使用第三方 loader 来使webpack支持打包css文件，那么这里分别列出css less sass 所对应的 loader

注意有坑： less和sass本省最后也要翻译成css，因此style-loader和css-loader是必装项
Css: style-loader css-loader
Less: less-loader
Sass: sass-loader

那么这里使用cnpm来安装！若是使用npm有可能会安装不上
安装命令: cnpm i style-loader -D cnpm i css-loader -D

那么安装完成之后咱们还须要建立一个叫作 webpack.config.json的文件！那么这个文件通常状况下你的项目是不会有的

因此咱们须要到webpack的官网上去拷贝一份 https://webpack.js.org/ 

咱们手动建立一个名为 "webpack.config.json" 的文件，将如下的内容粘贴进去，而且咱们须要添加一些配置

const path = require('path');
module.exports = {
  entry: './src/index.js', //表明单独执行 "webpack" 命令后 在没有指定须要打包的js文件时默认打包的文件
  output: {
    path: path.resolve(__dirname, 'dist'), //打包好后的文件存放的文件夹路径
    filename: 'bundle.js' //打包好后的文件的路径
  },
　module:{ //这个节点 用于配置 全部第三方模块加载器

　　　　rules: [ //全部第三方模块的 匹配规则

　　　　　　//use 表明匹配的文件 使用对应的loader进行处理

　　　　　　{ test:/\.css$/,use: ['style-loader', 'css-loader']}, //匹配全部已.css结尾的文件

　　　　　　{ test:/\.less$/,use: ['style-loader', 'css-loader','less-loader']},

　　　　　　{ test:/\.scss$/,use: ['style-loader', 'css-loader','sass-loader']}

　　　　]

　　}

};

这里是经过正则表达式来匹配文件，use表明当前匹配的文件用哪个loader来处理。

那么若是你须要打包 less文件或者scss文件就经过cnpm i less-loader -D 安装完后添加一个rules的元素便可

---

 

 而后咱们使用webpack命令从新编译一下项目！

编译完成后生成的bundle.js文件

这个时候咱们修改下index.html，改成只引入bundle.js文件，那么我是有一个本身写的index.js文件和index.css文件

index.js文件中就是一个弹窗效果，index.css文件中是将全部的span标签内的文字变成红色

咱们打开浏览器访问一下！

 

能够看到一切正常输出，那么这样咱们就实现了将css文件和js文件打包在一块儿，而后只须要引入一个.js文件便可

---

最后在看下个人index.js文件和index.css文件,能够看到我这里还引入了一个jquery，webpack也帮我一块儿打包进去了！

也就是说我只须要引入一个bundle.js文件！就至关于引入了 index.js index.css jquery.js 三个文件！而且webpack会帮你处理es6代码的兼容性问题

 

webpack-dev-server（自动编译）使用

webpack 对css/less/sass的支持