摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二安装配置创建，效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中，需要分离到多带带的文件安装插
相关链接
webpack4详细教程，从无到有搭建react脚手架（一）
webpack4详细教程，从无到有搭建react脚手架（二）
Css 安装loaderyarn add style-loader css-loader -D配置
config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
...
+ {
+ test: /.css$/,
+ include: path.resolve(__dirname, "../src"),
+ use: ["style-loader", "css-loader"]
+ }
]
},
...
}
}
创建src/app.css
src/app.css
.text{
font-size: 20px;
color: brown;
}
src/App.js
+ import "./app.css";
function App(){
return (
-
+
hello react
)
}
...
yarn start， 效果：
Scss
安装loader
yarn add sass-loader node-sass -D
配置loader
config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
...
{
- test: /.css/,
+ test: /.(css|scss)$/,
include: path.resolve(__dirname, "../src"),
- use: ["style-loader", "css-loader"]
+ use: ["style-loader", "css-loader", "sass-loader"]
}
]
},
...
}
}
创建src/app.scss
src/app.scss
.title{
font-size: 18px;
font-weight: 800;
color: #333;
text-decoration: underline;
}
src/App.js
- import "./app.css";
+ import "./app.scss";
function App(){
return (
-
+
hello react
)
}
...
yarn start, 效果：
配置css-module模式
修改配置
config/webpack.common.js
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
...
{
...
- use: ["style-loader", "css-loader", "sass-loader"]
+ use: [
+ "style-loader",
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ mode: "local",
+ localIdentName: "[path][name]_[local]--[hash:base64:5]"
+ },
+ localsConvention: "camelCase"
+ }
+ },
+ "sass-loader"
+ ]
}
]
},
...
}
}
src/App.js
- import "./app.scss";
+ import styles from "./app.scss";
function App(){
return (
-
+
hello react
)
}
export default hot(App);
yarn start
现在编译后的css由js动态内联在html中，需要分离到多带带的文件
安装插件extract-text-webpack-plugin， 注意最新版才支持webpack4
yarn add extract-text-webpack-plugin@next -D
配置
config/webpack.common.js
...
+ const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
rules: [
...
{
test: /.(css|scss)$/,
include: path.resolve(__dirname, "../src"),
- use: [
- "style-loader",
- {
- loader: "css-loader",
- options: {
- modules: {
- mode: "local",
- localIdentName: "[path][name]_[local]--[hash:base64:5]"
- },
- localsConvention: "camelCase"
- }
- },
- "sass-loader"
- ]
+ use: ExtractTextPlugin.extract({
+ fallback: "style-loader",
+ use: [
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ mode: "local",
+ localIdentName: "[path][name]_[local]--[hash:base64:5]"
+ },
+ localsConvention: "camelCase"
+ }
+ },
+ "sass-loader"
+ ]
+ })
},
...
]
},
plugins: [
...
new ExtractTextPlugin({
filename: "[name][hash].css"
}),
]
yarn build, 效果：
使用postcss对css3属性添加前缀
安装
yarn add postcss-loader postcss-import autoprefixer -D
配置
config/webpack.common.js
module: {
rules: [
...
{
test: /.(css|scss)/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
...
+ {
+ loader: "postcss-loader",
+ options: {
+ ident: "postcss",
+ plugins: loader => [
+ require("postcss-import")({ root: loader.resourcePath }),
+ require("autoprefixer")()
+ ]
+ }
+ }
]
})
},
...
]
}
对生产模式下的css进行压缩
安装
yarn add optimize-css-assets-webpack-plugin -D
配置
config/webpack.prod.js
+ const optimizeCss = require("optimize-css-assets-webpack-plugin");
const config = {
+ plugins: [
+ new optimizeCss({
+ cssProcessor: require("cssnano"),
+ cssProcessorOptions: { discardComments: { removeAll: true } },
+ canPrint: true
+ }),
+ ],
}
...
yarn build， 效果：
css相关配置完了，当然还有一些静态资源的配置
字体
安装loader
yarn add file-loader -D
配置
config/webpack.common.js
module: {
rules: [
...
+ {
+ test: /.(woff|woff2|eot|ttf|otf)$/,
+ use: ["file-loader"]
+ },
]
},
图片
安装loader
yarn add url-loader -D
配置
config/webpack.common.js
module: {
rules: [
...
+ {
+ test: /.(jpg|png|svg|gif)$/,
+ use: [
+ {
+ loader: "url-loader",
+ options: {
+ limit: 10240,
+ name: "[hash].[ext]",
+ }
+ },
+ ]
+ },
]
}
添加两张图片
src/assets/small.jpg -- 6kb
src/assets/bigger.jpg -- 20kb
引入图片
src/App.js
+ import small_pic from "./assets/small.jpg";
+ import bigger_pic from "./assets/bigger.jpg";
function App(){
return (
hello react
+
+
)
}
export default hot(App);
效果
可以看到，小于10k的图片编译成了base64格式，而大于10k的图片以链接形式赋值给src， 由url-loader的limit选项决定界限
相关链接
webpack4详细教程，从无到有搭建react脚手架（四）
源码github仓库： https://github.com/tanf1995/W...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105477.html
相关文章
-
webpack4详细教程，从无到有搭建react脚手架（二）
摘要：相关链接详细教程，从无到有搭建脚手架一配置插件，这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考上这个插件文档来配置，文档地址生成打
相关链接
webpack4详细教程，从无到有搭建react脚手架（一）
配置插件 clean-webpack-plugin、 html-webpack-plugin...
-
webpack4详细教程，从无到有搭建react脚手架（一）
摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。
showImg(https://segment...
-
webpack4详细教程，从无到有搭建react脚手架（四）
摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二详细教程，从无到有搭建脚手架三管理打包后目录结构打包结构如下修改配置通过相对目录对资源命名前加上目录名，效果后面的步骤在这里需要安装一个大型的包，以为例安装为第三
相关链接
webpack4详细教程，从无到有搭建react脚手架（一）
webpack4详细教程，从无到有搭建react脚手架（二）
webpack4详细...
-
学习从零开始搭建React脚手架
摘要：写在前面准备学习一下和相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步，依赖总览完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了按需加载的地步。
写在前面
准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;...
-
如何搭建一个基于react、webpack4、babel7的项目（一）
摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。
前言
写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...
发表评论
0条评论
Sunxb
男|高级讲师
TA的文章
阅读更多
快速检查当前电脑是否开启TPM 2.0兼容升级Windows 11
阅读 2790·2021-10-08 10:12
怎么做虚拟主机-怎么让自己电脑做虚拟主机？
阅读 3872·2021-09-22 15:45
css实现左侧宽度自适应，右侧固定宽度
阅读 2421·2019-08-30 15:52
跨专业学编程 | 矿物加工专业也能拿到年薪16W+的研发offer ？
阅读 2530·2019-08-29 18:44
Web Animation Api 入门
阅读 2551·2019-08-29 12:37
TypeScript，初次见面，请多指教 ?
阅读 1042·2019-08-26 13:36
回到基础：如何用原生 DOM API 生成表格
阅读 2478·2019-08-26 13:34
有一种心酸，叫做程序员选错了平台
阅读 1331·2019-08-26 12:20
最新活动
