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选项决定界限
未完待续！