共计 3755 个字符，预计需要花费 10 分钟才能阅读完成。
Css
安装 loader
yarn 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 (
- <div>
+ <div className="text">
hello react
</div>
)
}
...
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 (
- <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 选项决定界限
未完待续！
正文完
发表至： javascript
2019-07-09
