在本文中，我们将带你了解在React组件中使用CSS模块以及由webpack构建的Typescript在这篇文章中，我们将为您详细介绍在React组件中使用CSS模块以及由webpack构建的Type
在本文中，我们将带你了解在React组件中使用CSS模块以及由webpack构建的Typescript在这篇文章中，我们将为您详细介绍在React组件中使用CSS模块以及由webpack构建的Typescript的方方面面，并解答react-css-module常见的疑惑，同时我们还将给您一些技巧，以帮助您实现更有效的React + Typescript + Webpack 开发环境配置、React+TypeScript+webpack4多入口配置、React+TypeScript+webpack4多入口配置详解、reactjs – 如何使用Webpack构建的React组件库分发字体或其他静态资产？。
本文目录一览：- 在React组件中使用CSS模块以及由webpack构建的Typescript（react-css-module）
- React + Typescript + Webpack 开发环境配置
- React+TypeScript+webpack4多入口配置
- React+TypeScript+webpack4多入口配置详解
- reactjs – 如何使用Webpack构建的React组件库分发字体或其他静态资产？
在React组件中使用CSS模块以及由webpack构建的Typescript（react-css-module）
我想在用Typescript编写的React应用程序中将css-
loader与webpack的’modules’选项一起使用。这个例子是我的起点（他们使用Babel，webpack和React）。
webpack配置
var webpack=require(''webpack'');var path=require(''path'');var ExtractTextPlugin=require("extract-text-webpack-plugin");module.exports={ entry: [''./src/main.tsx''], output: { path: path.resolve(__dirname, "target"), publicPath: "/assets/", filename: ''bundle.js'' }, debug: true, devtool: ''eval-source-map'', plugins: [ new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({minimize: true}) ], resolve: { extensions: ['''', ''.jsx'', ''.ts'', ''.js'', ''.tsx'', ''.css'', ''.less''] }, module: { loaders: [ { test: /\.ts$/, loader: ''ts-loader'' }, { test: /\.tsx$/, loader: ''react-hot!ts-loader'' }, { test: /\.jsx$/, exclude: /(node_modules|bower_components)/, loader: "react-hot!babel-loader" }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: "babel-loader" }, { test: /\.css/, exclude: /(node_modules|bower_components)/, loader: ExtractTextPlugin.extract(''style-loader'', ''css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'') } ] }, plugins: [ new ExtractTextPlugin("styles.css", {allChunks: true}) ], postcss: function() { return [require("postcss-cssnext")()] }}这是我想用随附的CSS文件设置样式的React组件：
import React = require(''react'');import styles = require(''../../../css/tree.css'')class Tree extends React.Component<{}, TreeState> {... render() { var components = this.state.components return ( <div> <h3 className={styles.h3} >Components</h3> <div id="tree" className="list-group"> ... </div> </div> ) }} export = Treetree.css
.h3{ color: red;}说明无论我在做什么（试图改变进口语法，试图声明“要求”为TS-装载机，在这里，我总是得到：
未捕获的错误：找不到模块“ ../../../css/tree.css”
在运行时
错误TS2307：找不到模块“ ../../../css/tree.css”。
由TS编译器。发生了什么？在我看来，css-loader甚至没有发出ICSS？还是ts-loader出现错误？
答案1
小编典典import对TypeScript具有特殊意义。这意味着TypeScript将尝试加载并了解正在导入的内容。正确的方法是require像您提到的那样进行定义，var而不是import：
var styles = require(''../../../css/tree.css'')`
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。
Typescript 给 React 带来很多好处：
在组件头部定义
interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的props和state；在编译中发现问题，减少运行时的报错；
可以在编辑器中实现实时类型校验、引用查询；
约束类型，在混合多语言环境中降低风险，等。
且配置也是非常简单，步骤如下。
文件目录
. ├── build # 前端配置文件 │ ├── index.html │ ├── webpack.config.js ├── app # 前端目录 ├── .gitignore ├── package.json ├── tsconfig.json └── tslint.json
配置流程
创建项目
mkdir my-project && cd my-project npm init
安装依赖
npm i -g webpack webpack-dev-server npm i --save react react-dom @types/react @types/react-dom npm i --save-dev ts-loader source-map-loader npm link webpack webpack-dev-server typescript
配置 webpack
/* build/webpack.config.js */
const config = {
entry: './app/index.tsx',output: {
filename: 'app.bundle.js',path: './public',publicPath: '/assets'
},devtool: 'source-map',resolve: {
extensions: ['','.webpack.js','.web.js','.ts','.tsx','.js']
},module: {
loaders: [
{
test: /\.tsx?$/,loader: 'ts-loader'
}
],preLoaders: [
{
test: /\.js$/,loader: 'source-map-loader'
}
]
},devtool: 'eval'
}
module.exports = config
配置 tsconfig
/* tsconfig.json */
{
"compilerOptions": {
"outDir": "./public/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"
},"files": [
"./app/index.tsx"
]
}
至此，基本配置已经完成，后面创建好一个入口页面和entry文件就可以跑起来了：
/* build/index.html */
<!doctype html>
<html lang="zh-cn">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Hello world</title>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
</head>
<body>
<div id="app"></div>
<script src="assets/app.bundle.js"></script>
</body>
</html>
/* app/index.tsx */
import * as React from 'react'
import { render } from 'react-dom'
interface IAppProps {}
interface IAppState {}
class App extends React.Component<IAppProps,IAppState> {
public render(): JSX.Element {
return (
<div>
Hello world
</div>
)
}
}
render(<App />,document.getElementById('app'))
启动项目
webpack-dev-server --inline --config build/webpack.config.js --content-base build --open
出来吧神龙
简单的说明
Webpack 配置
Webpack配置其实是一件很简单的事情，这也是他具备强大竞争力的重要因素。
从配置文件中可以看出，里面无非就是entry、output和loader，如果需要编译CSS，在loader里面加一个即可：
npm i --save-dev style-loader css-loader
/* build/webpack.config.js */
const config = {
// ...
module: {
loaders: [
{
test: /\.css/,loader: 'style-loader!css-loader'
}
],// ...
},// ...
}
项目启动
项目启动的命令过长，放进 package.json 的 scripts 就好了：
/* package.json */
{
"scripts": {
"dev": "webpack-dev-server --inline --config build/webpack.config.js --content-base build --open",},}
再执行以下命令试试：
npm run dev
tslint
在开发中如果有个约束代码的工具能够让代码更加优雅，以前用的是 eslint，如果用 .tsx 就不能生效了，这里推荐使用 tslint ：
npm i -g tslint cd my-project tslint --init
这样会在项目文件中创建一个现成的 tslint 配置文件： tslint.json ，个性化方案可以自行设置。
参考
webpack 新官网
webpack dev server
tsconfig.json 配置文档
style-loader
tslint
原文
原文地址：React + Typescript + Webpack 开发环境配置
文章作者：Heleth
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证） 转载请注明出处
React+TypeScript+webpack4多入口配置
资源
- React-16.8.*
- react-router-dom-4.3.*
- TypeScript-3.5.*
- webpack-4.*
- eslint-5.16.*
项目目录
├── dist # 打包结果目录
│ ├── demo1 //类别demo1的打包结果
│ │ ├── demo1.himl
│ │ ├── demo1.js
│ │ └── demo1.css
│ └── demo2 ... //类别demo2的打包结果
├── src # 业务资源文件目录
│ ├── category //项目分类
│ │ ├── demo1
│ │ ├── demo2
│ │ └── ...
│ ├── components //公共组件
│ ├── util //公共资源
│ └── custom.d.ts //项目全局变量声明文件
├── index.html //项目启动入口
├── .gitignore //git忽略文件
├── .eslintrc.js //eslint校验配置
├── package.json //依赖包
├── tsconfig.json //ts配置
├── webpack.config.build.js //webpack打包
├── webpack.config.base.js //webpack基础配置
└── webpack.config.js //项目启动配置前言
对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。
Typescript 给 React 带来很多好处：
- 在组件头部定义
interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的props和state； - 在编译中发现问题，减少运行时的报错；
- 可以在编辑器中实现实时类型校验、引用查询；
- 约束类型，在混合多语言环境中降低风险，等。
需求
要搭建一个React+TypeScript+webpack的项目的话，一般都是团队开发多人多文件项目，在搭建之前需要优先考虑以下几个方面：
- 开发体验
- 项目打包
- 团队规范
安装
-
前置安装
首先需要全局安装typescript，这里默认大家都已经安装了node以及npmnpm install -g typescript -
首先新建文件夹并进入
mkdir tsDemo && cd tsDemo -
然后进行初始化，生成
package.json和tsconfig.jsonnpm init -y && tsc --init -
安装开发工具
npm install-D webpack webpack-cli webpack-dev-server -
安装react相关
因为需要整合ts，而react原本的包是不包含验证包的，所以这里也需要安装相关ts验证包npm install -S react react-dom npm install -D @types/react @types/react-dom -
安装
ts-loadernpm install -D ts-loader - 以上是基本的 后续会贴出项目demo里面包含所有依赖包
webpack配置
添加webpack文件
根目录下新建webpack.config.base.js、webpack.config.build.js、webpack.config.js文件
touch webpack.config.base.js webpack.config.build.js webpack.config.js-
entry：入口文件（你要打包，就告诉我打包哪些） -
output：出口文件（我打包完了，给你放到哪里） -
resolve: 寻找模块所对应的文件 -
module：模块（放lorder，编译浏览器不认识的东西） -
plugins：插件（辅助开发，提高开发效率） -
externals:打包忽略 -
devServer：服务器（webpack提供的本地服务器） -
mode：模式，分为开发模式、生产模式。此为4.X里新增的
配置entry入口文件
因为大部分项目是多入口，多类别的，所有入口配置时不要配置单一入口
const fs = require("fs");
const path = require("path");
const optimist = require("optimist");
const cateName = optimist.argv.cate;
let entryObj = {};
const srcPath = `${__dirname}/src`;
//获取当前项目要启动或者打包的基础路径
const entryPath = `${srcPath}/category/`;
//未指定类别 启动或者打包所有类别
//如：npm run dev 或者npm run build
if (cateName == true) {
fs.readdirSync(entryPath).forEach((cateName, index) => {
// cateName/cateName指定输出路径为entryname
if (cateName != "index.html" && cateName != ".DS_Store") entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
});
} else if (cateName.indexOf(",")) {
// 一次指定多个类别 类别之间以","分割
//如：npm run dev erhsouche,huoche
let cateNameArray = cateName.split(",");
for (let i = 0; i < cateNameArray.length; i++) {
entryObj[`${cateNameArray[i]}/${cateNameArray[i]}`] = `${entryPath + cateNameArray[i]}/${
cateNameArray[i]
}.tsx`;
}
} else {
// 打包单个入口文件
//如：npm run dev ershouche
entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
}
const webpackConfig = {
entry: entryObj,
}
module.exports = {
webpackConfig,
entryObj
};配置output出口文件
const webpackConfig = {
output: {
//输出文件名称以当前传入的cate类别名称命名
filename: "[name].js",
//输出到根目录下的dist目录中
path: path.resolve(__dirname, "dist"),
publicPath: "/",
},
}配置resolve
需要import xxx from ''xxx''这样的文件的话需要在webpack中的resolve项中配置extensions，这样以后引入文件就不需要带扩展名
const webpackConfig = {
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".json"],
//配置项通过别名来把原导入路径映射成一个新的导入路径。
alias: {
images: path.join(__dirname, "src/util/img")
},
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
modules: [path.resolve(__dirname, "node_modules")]
},
}配置module
概念
在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader
loader就像是一个翻译员，浏览器不是不认识这些东西么?那好交给loader来办，它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块，而这些模块想要打包loader必不可少，所以它在webpack里显得异常重要。loader跟插件一样都是模块，想要用它需要先安装它，使用的时候把它放在module.rules参数里，rules翻译过来的意思就是规则，所以也可以认为loader就是一个用来处理不同文件的规则
所需loader
-
ts-loader
编译TypeScript文件
npm install ts-loader -D -
url-loader
处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。
npm install url-loader -D - css处理所需loader
css-loader 处理csssass-loader 编译处理scss
sass-resources-loader 全局注册变量
- html-loader
处理.html文件
module完整配置
const webpackConfig = {
module: {
rules: [
//处理tsx文件
{ test: /\.(tsx|ts)?$/, use: ["ts-loader"], include: path.resolve(__dirname, "src") },
//处理图片资源
{
test: /\.(png|jpe?g|jpg|gif|woff|eot|ttf|svg)/,
use: [
// 对非文本文件采用file-loader加载
{
loader: "url-loader",
options: {
limit: 1024 * 30, // 30KB以下的文件
name: "images/[name].[hash:8].[ext]",
}
}
],
},
//处理css和scss
{
test: /\.(css|scss)$/,
use: [
//css单独打包
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
plugins: () => [require("autoprefixer")],
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-resources-loader",
options: {
resources: ["./skin/mixin.scss", "./skin/base.scss"]
}
}
],
exclude: path.resolve(__dirname, "node_modules")
},
{
test: /\.html$/,
use: {
loader: "html-loader",
}
},
{ test: /src\/containers(\/.*).(tsx|ts)/, loader: "bundle-loader?lazy!ts-loader" },
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
}配置plugins
plugins里面放的是插件，插件的作用在于提高开发效率，能够解放双手，让我们去做更多有意义的事情。一些很low的事就统统交给插件去完成。
const webpackConfig = {
plugins: [
//清除文件
new CleanWebpackPlugin(),
//css单独打包
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[name].css"
}),
// 引入热更新插件
new webpack.HotModuleReplacementPlugin()
]
}配置externals
如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
const webpackConfig = {
//项目编译打包是忽略这些依赖包
externals: {
react: "React",
"react-dom": "ReactDOM",
"react-redux": "ReactRedux",
}
}配置mode
mode是webpack4新增的一条属性，它的意思为当前开发的环境。mode的到来减少了很多的配置，它内置了很多的功能。相较以前的版本提升了很多，减少了很多专门的配置
- 提升了构建速度
- 默认为开发环境，不需要专门配置
- 提供压缩功能，不需要借助插件
- 提供
SouceMap，不需要专门配置
mode分为两种环境，一种是开发环境（development）,一种是生产环境（production）。开发环境就是我们写代码的环境，生产环境就是代码放到线上的环境。这两种环境的最直观区别就是，开发环境的代码不提供压缩，生产环境的代码提供压缩。
配置devServer
const webpackConfig = {
devServer: {
// 本地服务器所加载的页面所在的目录
contentBase: srcPath,
//热更新
hot: true,
//服务端口
port: "7788",
// 是否向Chunk中注入代理客户端，默认注入
inline: true,
// publicPath: ''/dist/'',
historyApiFallback: {
index: "template.html",
},
//默认检查hostname
disableHostCheck: true,
compress: true,
open: true // 自动打开首页
}
}
React+TypeScript+webpack4多入口配置详解
资源
- React-16.8.*
- react-router-dom-4.3.*
- TypeScript-3.5.*
- webpack-4.*
- eslint-5.16.*
项目目录
├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category //项目分类 │ │ ├── demo1 │ │ ├── demo2 │ │ └── ... │ ├── components //公共组件 │ ├── util //公共资源 │ └── custom.d.ts //项目全局变量声明文件 ├── index.html //项目启动入口 ├── .gitignore //git忽略文件 ├── .eslintrc.js //eslint校验配置 ├── package.json //依赖包 ├── tsconfig.json //ts配置 ├── webpack.config.build.js //webpack打包 ├── webpack.config.base.js //webpack基础配置 └── webpack.config.js //项目启动配置
前言
对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。
Typescript 给 React 带来很多好处：
- 在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state；
- 在编译中发现问题，减少运行时的报错；
- 可以在编辑器中实现实时类型校验、引用查询；
- 约束类型，在混合多语言环境中降低风险，等。
需求
要搭建一个React+TypeScript+webpack的项目的话，一般都是团队开发多人多文件项目，在搭建之前需要优先考虑以下几个方面：
- 开发体验
- 项目打包
- 团队规范
安装
前置安装
首先需要全局安装typescript，这里默认大家都已经安装了node以及npm
npm install -g typescript
首先新建文件夹并进入
mkdir tsDemo && cd tsDemo
然后进行初始化，生成package.json和tsconfig.json
npm init -y && tsc --init
安装开发工具
npm install-D webpack webpack-cli webpack-dev-server
安装react相关
因为需要整合ts，而react原本的包是不包含验证包的，所以这里也需要安装相关ts验证包
npm install -S react react-dom npm install -D @types/react @types/react-dom
安装ts-loader
npm install -D ts-loader
以上是基本的 后续会贴出项目demo里面包含所有依赖包
webpack配置
添加webpack文件
根目录下新建webpack.config.base.js、webpack.config.build.js、webpack.config.js文件
touch webpack.config.base.js webpack.config.build.js webpack.config.js
- entry：入口文件（你要打包，就告诉我打包哪些）
- output：出口文件（我打包完了，给你放到哪里）
- resolve: 寻找模块所对应的文件
- module：模块（放lorder，编译浏览器不认识的东西）
- plugins：插件（辅助开发，提高开发效率）
- externals:打包忽略
- devServer：服务器（webpack提供的本地服务器）
- mode：模式，分为开发模式、生产模式。此为4.X里新增的
配置entry入口文件
因为大部分项目是多入口，多类别的，所有入口配置时不要配置单一入口
const fs = require("fs");
const path = require("path");
const optimist = require("optimist");
const cateName = optimist.argv.cate;
let entryObj = {};
const srcPath = `${__dirname}/src`;
//获取当前项目要启动或者打包的基础路径
const entryPath = `${srcPath}/category/`;
//未指定类别 启动或者打包所有类别
//如：npm run dev 或者npm run build
if (cateName == true) {
fs.readdirSync(entryPath).forEach((cateName, index) => {
// cateName/cateName指定输出路径为entryname
if (cateName != "index.html" && cateName != ".DS_Store") entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
});
} else if (cateName.indexOf(",")) {
// 一次指定多个类别 类别之间以","分割
//如：npm run dev erhsouche,huoche
let cateNameArray = cateName.split(",");
for (let i = 0; i < cateNameArray.length; i++) {
entryObj[`${cateNameArray[i]}/${cateNameArray[i]}`] = `${entryPath + cateNameArray[i]}/${
cateNameArray[i]
}.tsx`;
}
} else {
// 打包单个入口文件
//如：npm run dev ershouche
entryObj[`${cateName}/${cateName}`] = `${entryPath + cateName}/${cateName}.tsx`;
}
const webpackConfig = {
entry: entryObj,
}
module.exports = {
webpackConfig,
entryObj
};
配置output出口文件
const webpackConfig = {
output: {
//输出文件名称以当前传入的cate类别名称命名
filename: "[name].js",
//输出到根目录下的dist目录中
path: path.resolve(__dirname, "dist"),
publicPath: "/",
},
}
配置resolve
需要import xxx from ''xxx''这样的文件的话需要在webpack中的resolve项中配置extensions，这样以后引入文件就不需要带扩展名
const webpackConfig = {
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".json"],
//配置项通过别名来把原导入路径映射成一个新的导入路径。
alias: {
images: path.join(__dirname, "src/util/img")
},
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
modules: [path.resolve(__dirname, "node_modules")]
},
}
配置module
概念
在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader
loader就像是一个翻译员，浏览器不是不认识这些东西么?那好交给loader来办，它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块，而这些模块想要打包loader必不可少，所以它在webpack里显得异常重要。loader跟插件一样都是模块，想要用它需要先安装它，使用的时候把它放在module.rules参数里，rules翻译过来的意思就是规则，所以也可以认为loader就是一个用来处理不同文件的规则
所需loader
ts-loader
编译TypeScript文件
npm install ts-loader -D
url-loader
处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。
npm install url-loader -D
css处理所需loader
css-loader 处理css
sass-loader 编译处理scss
sass-resources-loader 全局注册变量
html-loader
处理.html文件
module完整配置
const webpackConfig = {
module: {
rules: [
//处理tsx文件
{ test: /\.(tsx|ts)?$/, use: ["ts-loader"], include: path.resolve(__dirname, "src") },
//处理图片资源
{
test: /\.(png|jpe?g|jpg|gif|woff|eot|ttf|svg)/,
use: [
// 对非文本文件采用file-loader加载
{
loader: "url-loader",
options: {
limit: 1024 * 30, // 30KB以下的文件
name: "images/[name].[hash:8].[ext]",
}
}
],
},
//处理css和scss
{
test: /\.(css|scss)$/,
use: [
//css单独打包
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
plugins: () => [require("autoprefixer")],
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-resources-loader",
options: {
resources: ["./skin/mixin.scss", "./skin/base.scss"]
}
}
],
exclude: path.resolve(__dirname, "node_modules")
},
{
test: /\.html$/,
use: {
loader: "html-loader",
}
},
{ test: /src\/containers(\/.*).(tsx|ts)/, loader: "bundle-loader?lazy!ts-loader" },
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
}
配置plugins
plugins里面放的是插件，插件的作用在于提高开发效率，能够解放双手，让我们去做更多有意义的事情。一些很low的事就统统交给插件去完成。
const webpackConfig = {
plugins: [
//清除文件
new CleanWebpackPlugin(),
//css单独打包
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[name].css"
}),
// 引入热更新插件
new webpack.HotModuleReplacementPlugin()
]
}
配置externals
如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
const webpackConfig = {
//项目编译打包是忽略这些依赖包
externals: {
react: "React",
"react-dom": "ReactDOM",
"react-redux": "ReactRedux",
}
}
配置mode
mode是webpack4新增的一条属性，它的意思为当前开发的环境。mode的到来减少了很多的配置，它内置了很多的功能。相较以前的版本提升了很多，减少了很多专门的配置
- 提升了构建速度
- 默认为开发环境，不需要专门配置
- 提供压缩功能，不需要借助插件
- 提供SouceMap，不需要专门配置
mode分为两种环境，一种是开发环境（development）,一种是生产环境（production）。开发环境就是我们写代码的环境，生产环境就是代码放到线上的环境。这两种环境的最直观区别就是，开发环境的代码不提供压缩，生产环境的代码提供压缩。
配置devServer
const webpackConfig = {
devServer: {
// 本地服务器所加载的页面所在的目录
contentBase: srcPath,
//热更新
hot: true,
//服务端口
port: "7788",
// 是否向Chunk中注入代理客户端，默认注入
inline: true,
// publicPath: ''/dist/'',
historyApiFallback: {
index: "template.html",
},
//默认检查hostname
disableHostCheck: true,
compress: true,
open: true // 自动打开首页
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
- React+Webpack快速上手指南(小结)
- 从零搭建Webpack5-react脚手架的实现步骤(附源码)
- 使用webpack配置react-hot-loader热加载局部更新
reactjs – 如何使用Webpack构建的React组件库分发字体或其他静态资产？
例如,resolve-url-loader将输出“/myfont.woff”的URL.但是,当然,该文件实际上并不在应用程序中的该URL处可用,除非使用它的应用程序执行某些配置来复制该文件并在预期路径上提供该文件.
当应用程序从我的库导入组件时,有没有办法自动使这些字体可用(即font-face：’我的字体’将起作用),从而最大限度地减少使用它的应用程序所需的配置量？
对于大文件,我不想使用url-loader和Base 64编码它们,我不能使用CDN.
...
{
test: /\.css$/,use: ['style-loader','css-loader'],},{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg)$/,use: ['file-loader'],...
在他们的webpack.config.js和你的代码中导入的.css文件中,他们将能够通过自动将资产转移到他们的输出公共目录来使用资产(URL也应该在结果CSS包中自动调整).
例如,您可以查看Onsen UI库,它提供了通过这些文件嵌入其资源和样式：
import 'onsenui/css/onsenui.css'; import 'onsenui/css/onsen-css-components.css';
以下是他们如何通过相对URL使用字体的示例：
@font-face {
font-family: 'Material-Design-Iconic-Font';
src: url('../fonts/Material-Design-Iconic-Font.woff2') format('woff2'),url('../fonts/Material-Design-Iconic-Font.woff') format('woff'),url('../fonts/Material-Design-Iconic-Font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
我们今天的关于在React组件中使用CSS模块以及由webpack构建的Typescript和react-css-module的分享已经告一段落，感谢您的关注，如果您想了解更多关于React + Typescript + Webpack 开发环境配置、React+TypeScript+webpack4多入口配置、React+TypeScript+webpack4多入口配置详解、reactjs – 如何使用Webpack构建的React组件库分发字体或其他静态资产？的相关信息，请在本站查询。
本文标签：
