react+webpack中js和css的引入

xiaoxiao2021-02-28  29

    今天,打算写第一个页面,结果遇到了些阻力,没有想象的那么简单,有些特定的配置,还有组件的引用,还有css和js的加载模式。

按照上一篇搭建的环境,基本上是一个helloWorld了,接下来写第一个页面,首先我们将之前的入口文件删除,新建比如起名叫SearchRoom,创建入口文件index.js。

在index.js里面引入组件模块:

import SearchRoom from './app/SearchRoom/searchRoom.js'; ReactDOM.render(<SearchRoom />, document.getElementById('root'));注意格式,index.html和之前的一样(保留的)。

组件模块代码:

class SearchRoom extends React.Component { render() { return (<div>hahahaha </div>)} } export default SearchRoom

启动:npm start

并没有生成html文件,我们需要安装

html-webpack-plugin

并且在webpack.config.js里面进行配置

const HtmlWebpackPlugin = require( 'html-webpack-plugin'); const cleanWebpackPlugin = require( 'clean-webpack-plugin'); model.. exports = { ... plugins : [ new HtmlWebpackPlugin({          filename : 'index.html',          template : 'src/index.html'     }), new cleanWebpackPlugin([ 'dist/assets'])], ...

这样就可以在指定,目录下生成编译后的html了。

再次打包,就可以了,在组件里面编写react代码生成页面。

然后就是样式的引入,明天的主要工作,样式有公共的样式和模块的样式引入配置。

插曲:

 html-webpack-plugin插件:

       功能:自动帮你生成一个 html 文件,并且引用相关的 assets 文件(如 css, js)       

       基本用法:

            filename:  生成 html 文件的文件名。默认为 index.html.

            template(模板): 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader, 否则webpack不能正确解析。

clean-webpack-plugin插件:

功能: 用于在building之前删除你以前build过的文件

         基本用法:newCleanWebpackPlugin(paths [, {options}])

paths: 数组,数组的每一个元素为要删除的路径。eg: ['dist/assets']

            今天的页面:

关于样式的引入:

1、公共css的引入

引入相关插件后,修改配置:

{              test: / \. css $ /,              use: [ 'style-loader', 'css-loader'],              exclude: /node_modules/ } 在jsx里面引入 import './assets/css/iuapmobile.um.css';

2、对于自己写的css

先声明:

import SearchRoomStyle from './searchRoom.css';

创建css文件、然后写css:

.cai { margin-top: 60px; }

在js里面添加 className =“cai”,样式生效。

下一篇将模块化,创建基本模块。

使用react-router-dom,通过路由,实现页面的变化。

转载请注明原文地址: https://www.6miu.com/read-2650319.html

最新回复(0)