npm 怎么查看安装style-loader完成没
发布网友
发布时间：2022-04-23 17:45
共1个回答
热心网友
时间：2022-05-15 01:32
1.准备: npm安装以下组件a.安装react/antd:npm install react react-dom antd --saveb.安装webpack/less:npm install webpack less --save-devwebpack根据需要选择使用-g安装c.安装babel-loader以及其他相关package:npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-devd.选择安装style-loader/css-loadernpm install style-loader css-loader --save-dev2. 配置webpack.config.js具体配置可以查看webpack提供的例子，主要依赖的是babel-loaderbabel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader3. 编写我们的文件(例如: demo-antd.jsx)只使用了antd提供的Button组件。只使用了antd提供的Button组件。ps: 对比import { Button } from 'antd';和import Button from 'antd/lib/button';后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。4. 执行构建webpack ./demo-antd.jsx demo-antd-bundle.js将生成demo-antd-bundle.js文件5. 在页面中引入bundle文件(demo-antd-bundle.js)执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。
