webpack4+react项目搭建(三)

Css

1.安装loader

npm install style-loader css-loader -D`

2.配置loader

build/webpack.common.js
... 
function webpackCommonConfigCreator(options){ 
   ...
   return { 
     ... 
     module: { 
       rules: [ 
         ... 
       + { 
       +    test: /\.css$/, + include: path.resolve(__dirname, '../src'), 
       +    use: ["style-loader", "css-loader"] 
       + } 
       ] 
      }, 
      ... 
} }

3.创建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> 
    ) 
}
...

npm run start 运行

Scss

1.安装loader

npm install sass-loader node-sass -D

2.配置loader

build/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"]
       } 
     ] 
    }, 
    ... 
  } 
}

3.创建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> 
   ) 
} 
...

npm run start 启动服务

配置css-module模式

1.修改配置

build/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);

npm run start 查看效果

将css分离到单独的文件

1.安装插件extract-text-webpack-plugin

npm install extract-text-webpack-plugin@next -D

2.配置

build/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" 
      }), 
  ]

npm run build 打包
3.使用postcss对css3属性添加前缀
安装

npm install postcss-loader postcss-import autoprefixer -D

配置

build/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进行压缩

安装

npm install optimize-css-assets-webpack-plugin -D

配置

build/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 
+              }), 
+           ], 
} 
...

npm run build 打包看效果
字体
安装loader

npm install file-loader -D

配置

build/webpack.common.js
module: { 
  rules: [ 
     ... 
   + { 
   +   test: /\.(woff|woff2|eot|ttf|otf)$/, 
   +   use: ['file-loader'] 
   + }, 
  ]
}

图片
安装loader

npm install url-loader -D

配置

build/webpack.common.js
module: { 
  rules: [ 
     ... 
  + { 
  +   test: /\.(jpg|png|svg|gif)$/, 
  +   use: [{
  +     loader: 'url-loader',
  +     options: {
  +        limit: 10240,
  +        name: '[hash].[ext]'
  +     }
  +   }] 
  + } 
  ]
}

引入图片

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);