資訊專欄INFORMATION COLUMN
摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二安裝配置創建，效果安裝配置創建效果配置模式修改配置現在編譯后的由動態內聯在中，需要分離到多帶帶的文件安裝插
相關鏈接
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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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
閱讀 2866·2021-10-08 10:12
怎么做虛擬主機-怎么讓自己電腦做虛擬主機？
閱讀 3966·2021-09-22 15:45
css實現左側寬度自適應，右側固定寬度
閱讀 2555·2019-08-30 15:52
跨專業學編程 | 礦物加工專業也能拿到年薪16W+的研發offer ？
閱讀 2625·2019-08-29 18:44
Web Animation Api 入門
閱讀 2644·2019-08-29 12:37
TypeScript，初次見面，請多指教 ?
閱讀 1154·2019-08-26 13:36
回到基礎：如何用原生 DOM API 生成表格
閱讀 2561·2019-08-26 13:34
有一種心酸，叫做程序員選錯了平臺
閱讀 1473·2019-08-26 12:20
最新活動
