Webpack4-对支持Css/Less/Sass

最新推荐文章于 2022-08-23 16:28:37 发布

weixin_30838873

最新推荐文章于 2022-08-23 16:28:37 发布

阅读量267

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/Richard-Tang/p/9850470.html

版权

那么我们写一个页面除了有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']}

　　　　]

　　}