webpack配置教程(二)

            一 ： 样式    

 在src下建立一个index.css的文件.

       写上以下代码：

            body{

                background-color: red;

    }

在app.js中引入这个css文件

    

        import "./index.css";        

如今咱们直接执行npm run start .看看会发生什么.

果真出现了这个错误。由于webpack它自己是不认识css代码，因此须要咱们去配置来让它识别css代码

css-loader --->解析css

安装: npm i -D css-loader

咱们还须要在webpack配置文件配置。跟以前react相似。

以下:

在执行npm run start

能够顺利打包，可是打开打包后的html。发现样式未生效，f12调试发现, css样式根本就没有引入到html中.

因此这时候须要有一个插件帮咱们引入

style-loader---->Adds CSS to the DOM by injecting a <style> tag

安装 : npmi -D style-loader

引入-

在执行npm run start，打包成功后，在浏览器打开html页面且f12打开控制台查看,

css代码已经被插入到当前页面，而且生效了。

sass

    在src下建立index.scss文件,而且添加以下代码:

                body{

                background: pink;

                }

在app.js中引入,删除引入的index.css

--import "./index.css";

++import "./index.scss";

这时候执行npm run start,会发生什么，我想,经历过以前的，你必然已经想到会报错而且知道是什么错误了。

 提示咱们用合适的loader来解析scss文件。

因此咱们先安装所须要的相关插件:

npm i -D sass-loader node-sass    

这一步安装可能会有报错，具体错误及解决办法参考

https://blog.csdn.net/qq_35440678/article/details/51909327

https://github.com/nodejs/node-gyp/issues/307#issuecomment-240556824

安装成功以后，引入.代码以下-

执行npm run start  ，打包成功，而且运行没问题.

目前css代码是嵌入在js中,css样式代码在js很奇怪,也不方便查看。咱们须要让css独立出来。

因此有们又须要用到一个插件.

    https://www.webpackjs.com/plugins/extract-text-webpack-plugin/

    npm i -D extract-text-webpack-plugin

在webpack.config.js添加相关和修改配置.

        一:    对象引入

                    //提取分离成独立的css文件

                    const ExtractTextPlugin = require("extract-text-webpack-plugin");

           二:  插件中引入.

         三 :配置

    

    最后运行npm run start

                会发现报错了。

缘由是:extract-text-webpack-plugin目前尚未webpack4版本 .可使用 npm i -D  extract-text-webpack-plugin@next解决

          详细:https://www.cnblogs.com/running-runtu/p/8769040.html

    安装好后,在执行 npm run start 时，打包成功且页面没问题。

    打包后:

css模块化:

        css-loader有一个属性能够开启模块化. 

修改配置. 以下:

  模块化后，咱们在js中使用css的方式改变了。

修改index.scss

        .ot{

        font-size:50px;

        }

打开app.js    模块化后的css样式是一个一个的模块,因此咱们须要具体引入

import style from "./index.scss";

class  App extends Component{

click = ()=>{

alert("ok");

}

render(){

return (

<div className = {style.ot}>

<span onClick = {this.click.bind(this)}>kkkkkk</span>

Hello React

</div>

)

}

}

打包后,打开页面打开控制台。发现类名被从新编码了。

如今你能够试试从新建立一个scss文件,里面也写一个.ot的选择器。在app.js中也引用这个选择器。看是会覆盖掉，仍是相互不影响。

有一个问题,这个模块化后的类名不语义化，不能很好的理解这是什么意思。咱们如今来解决这个问题。

css-loader有一个属性localIdentName :

    path:文件路径:------>例如 :src-css

    name :文件名字 ----->例如: index

    local : 选择器名字----->例如 ot

    hash:base64 ---->编码 ：后面的数字是须要显示编码后的几个数，默认是所有显示

执行 npm run start  打开Index页面调试发现

这样子类名是否是清楚不少了呢。

若是须要把打包后的css文件放在文件夹中。能够这样作。

打包后的结构就变成了这样

js也能够这样:

只需修改输出路径的文件名就能够了。以下：

打包的结构是这样的:

有一些文件咱们不须要让它模块化，好比插件和动画的css等.

因此跟Js同样，咱们须要排除掉不须要模块化的模块.

处理图片: 

在css中引入图片和在js中引入图片.以下

当这咱们应该知道这时候运行是会报错的。缘由我想通过前面的教程，你应该了解了------>提示咱们用合适的loader。

url-loader  Loads files as base64 encoded URL

安装: npm i -D url-loader

在webpack.config.js中配置:

打包，运行html后，图片出来了。F12查看. 图片被base64编码了。

图片太大了,咱们就不须要编码而是直接打包成图片。

npm run start 后报错.

这时候咱们须要安装: npm i -D file-loader 

在次打包成功后,运行html后发现大于40K的图片没有出现并且图片也确实打包出来了， F12调试后发现图片路径不对. 路径前面多了这里的路径

因此咱们要处理。

处理很简单，以下.

成功打包后, 在次打开Html，发现页面的全部东西都不见了。

F12. 

 

  文件路径不是基于当前目录的，没有加载出来.

解决办法:

    1.把dist文件夹下的文件放到磁盘跟目录下。

    2.在publicPath哪里写上当前项目的路径。

    3.把dist文件夹下的文件放到服务器下。