Webpack4详细教程，从头搭建React脚手架（三）
相关链接webpack4详细教程，从头搭建react脚手架（一）webpack4详细教程，从头搭建react脚手架（二）css安装loaderyarnaddstyle-loadercss-loader-D配置config/webpack.common.js...functionwebpackCommonConfigCreator(options){...return{...module:{rules:[...+{+test:/\.css$/,+include:path.resolve(__dirname,'../src'),+使用:["style-loader","css-loader"]+}]},...}}createsrc/app.csssrc/app.css.text{font-size:20px;颜色：棕色；}src/App.js+import'./app.css';functionApp(){return(-
)}...yarnstart，效果：Scss安装loaderyarnaddsass-loadernode-sass-D配置loaderconfig/webpack.common.js...functionwebpackCommonConfigCreator(options){...return{...模块：{规则：[...{-测试：/\.css/，+测试：/\.(css|scss)$/，包括：path.resolve(__dirname,'../src'),-use:["style-loader","css-loader"]+use:["style-loader","css-loader","sass-loader"]}]},...}}创建src/app.scsssrc/app.scss.title{字体大小：18px；字体粗细：800；颜色：#333；文本修饰：下划线；}src/App.js-导入“./app.css”；+导入'./app.scss';functionApp(){return(-
+helloreact )}...yarnstart,效果：配置css-module模型修改配置config/webpack.common.js...functionwebpackCommonConfigCreator(options){...return{...module:{rules:[...{...-使用：["style-loader","css-loader","sass-loader"]+使用:[+"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';+从“./app.scss”导入样式；functionApp(){return(-
+helloreact )}exportdefaulthot(App);yarnstart现在编译后的css被js动态内联到html中，Plugins需要分离成单独的文件来安装e.g.xtract-text-webpack-plugin，注意最新版本才支持webpack4yarnaddextract-text-webpack-plugin@next-D配置config/webpack.common.js...+constExtractTextPlugin=require('extract-text-webpack-插入'）;...模块：{规则：[...{测试：/\.(css|scss)$/，包括：path.resolve(__dirname,'../src'),-使用：[-"style-loader",-{-loader:"css-loader",-options:{-modules:{-mode:"local",-localIdentName:'[path][name]_[local]--[hash:base64:5]'-},-localsConvention:'camelCase'-}-},-"sass-loader"-]+使用：ExtractTextPlugin.extract({+fallback:"style-loader",+使用：[+{+loader:"css-loader",+options:{+modules:{+mode:"local",+localIdentName:'[path][name]_[local]--[hash:base64:5]'+},+localsConvention:'camelCase'+}+},+"sass-loader"+]+})},...]},插件:[...newExtractTextPlugin({文件名:"[name][hash].css"}),]yarnbuild,effect:使用postcss为css3属性添加前缀installyarnaddpostcss-loaderpostcss-importautoprefixer-Dconfigureconfig/webpack.common.jsmodule:{rules:[...{test:/\.(css|scss)/,使用:ExtractTextPlugin.extract({fallback:"style-loader",使用:[...+{+loader:"postcss-loader",+options:{+ident:'postcss',+plugins:loader=>[+require('postcss-import')({root:loader.resourcePath}),+require('autoprefixer')()+]+}+}]})},...]}在生产模式下压缩和安装css-插入'）;constconfig={+plugins:[+newoptimizeCss({+cssProcessor:require('cssnano'),+cssProcessorOptions:{discardComments:{removeAll:true}},+canPrint:true+}),+]],}...yarnbuild,effect:css相关配置完成，当然还有一些静态资源配置字体安装loaderyarnaddfile-loader-Dconfigurationconfig/webpack.common.jsmodule:{rules:[...+{+test:/\.(woff|woff2|eot|ttf|otf)$/,+use:['file-loader']+},]},镜像安装loaderyarn添加url-loader-D配置配置/webpack.common.js模块：{规则：[...+{+test:/\.(jpg|png|svg|gif)$/,+use:[+{+loader:'url-loader',+options:{+limit:10240,+name:'[hash].[ext]',+}+},+]+},]}添加两张图片src/assets/small.jpg--6kbsrc/assets/bigger.jpg--20kb导入图片src/App。js+从'./assets/small.jpg'导入small_pic；+从'./assets/bigger.jpg'导入bigger_pic；functionApp(){return(
helloreact++ )}exportdefaulthot(App);效果可以可以看到小于10k的图片编译成base64格式，大于10k的图片以链接的形式赋值给src，限制由url-loader的限制选项决定）源代码github仓库：https//github.com/tanf1995/W...
