webpack4詳細教程，從無到有搭建react腳手架（三）
相關連接css
Css
安裝loader
yarn add style-loader css-loader -D
複製代碼
配置
config/webpack.common.jsreact
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
...
+ {
+ test: /\.css$/,
+ include: path.resolve(__dirname, '../src'),
+ use: ["style-loader", "css-loader"]
+ }
]
},
...
}
}
複製代碼
建立src/app.csswebpack
src/app.csscss3
.text{
font-size: 20px;
color: brown;
}
複製代碼
src/App.jsgit
+ import './app.css';
function App(){
return (
- <div>
+ <div className="text">
hello react
</div>
)
}
...
複製代碼
yarn start， 效果：
Scss
安裝loader
yarn add sass-loader node-sass -D
複製代碼
配置loader
config/webpack.common.jsgithub
...
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.scssweb
src/app.scsssass
.title{
font-size: 18px;
font-weight: 800;
color: #333;
text-decoration: underline;
}
複製代碼
src/App.js
- import './app.css';
+ import './app.scss';
function App(){
return (
- <div className="text">
+ <div className="title">
hello react
</div>
)
}
...
複製代碼
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 (
- <div className="title">
+ <div className={styles.title}>
hello react
</div>
)
}
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 (
<div className={styles.title}>
hello react
+ <img src={small_pic} alt="" />
+ <img src={bigger_pic} alt="" />
</div>
)
}
export default hot(App);
複製代碼
效果
能夠看到，小於10k的圖片編譯成了base64格式，而大於10k的圖片以連接形式賦值給src， 由url-loader的limit選項決定界限
相關連接
源碼github倉庫： github.com/tanf1995/We…
相關文章
- 1. webpack4詳細教程，從無到有搭建react腳手架（四）
- 2. webpack4詳細教程，從無到有搭建react腳手架（一）
- 3. webpack4詳細教程，從無到有搭建react腳手架（二）
- 4. webpack4+react+antd從零搭建React腳手架（三）-路由搭建
- 5. webpack4+react+antd從零搭建React腳手架（四）-redux搭建
- 6. 從零搭建webpack4+react+typescript+eslint腳手架(三)
- 7. 【webpack系列】從零搭建 webpack4+react 腳手架（三）
- 8. webpack4構建react腳手架
- 9. webpack4+react+antd從零搭建React腳手架（一）
- 10. webpack4搭建腳手架_04
- 更多相關文章...
- • SSH框架（Struts2+Spring+Hibernate）搭建整合詳細步驟 - Spring教程
- • SSM（Spring+Spring MVC+MyBatis）框架整合搭建詳細步驟 - Spring教程
- • Java 8 Stream 教程
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webpack4詳細教程，從無到有搭建react腳手架（四）
- 2. webpack4詳細教程，從無到有搭建react腳手架（一）
- 3. webpack4詳細教程，從無到有搭建react腳手架（二）
- 4. webpack4+react+antd從零搭建React腳手架（三）-路由搭建
- 5. webpack4+react+antd從零搭建React腳手架（四）-redux搭建
- 6. 從零搭建webpack4+react+typescript+eslint腳手架(三)
- 7. 【webpack系列】從零搭建 webpack4+react 腳手架（三）
- 8. webpack4構建react腳手架
- 9. webpack4+react+antd從零搭建React腳手架（一）
- 10. webpack4搭建腳手架_04