從零搭建react框架(二)

1.項目靜態文件打包配置

圖片文件打包配置

安裝依賴包

yarn add url-loader url-loader

webpack.config.js

      {
        test: /\.(png|jpg|gif|woff|svg|ttf|eot)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            outputPath: './assets/img/', // 打包圖片位置
            name:'[name]-[hash:5].min.[ext]'
          }
        }]
      }

針對url圖片配置

安裝依賴包

yarn add copy-webpack-plugin

webpack.config.js

  plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src/assets/'),
      to: path.resolve(__dirname, 'dist/assets/')
    }])
  ],

打包結果

sass、css文件打包配置

安裝依賴包

yarn add node-sass sass-loader style-loader css-loader mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin  = require("mini-css-extract-plugin"); // 在生產環境將樣式表抽成單獨的文件，不依賴js

const devMode = process.env.NODE_ENV !== 'production';

plugins: [
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: devMode ? '[name].css' : '[name].[hash].css',
    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
  })
],

{
  test: /\.scss$/,
  use: [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
  ]
},

src/app.js

import React from 'react';
import ReactDom from 'react-dom';

import './assets/style/app.scss';

ReactDom.render(
  <div>
    react is building
    <img src="./assets/img/app.jpg" alt=""/>
  </div>,
  document.querySelector("#app"));

在src/assets目錄下新建img/app.jpg、style/app.scss文件，yarn start啓動項目

2.項目熱加載配置

開發人員修改了代碼，經過webpack打包後，只替換修改的部分代碼，做到頁面的局部刷新，不會改變react其他未修改的狀態和數據

安裝依賴包

yarn add react-hot-loader

/src/route/index.js

import React from 'react';
import {Switch, BrowserRouter, Route} from 'react-router-dom';
import {hot} from 'react-hot-loader';
import Index from '../views/Index';
import User from '../views/User';
import Count from '../views/Count';

const BasicRoute =() => (
  <BrowserRouter>
    <Switch>
      <Route exact component={Index} path="/"/>
      <Route exact component={User} path="/user"/>
      <Route exact component={Count} path="/count"/>
    </Switch>
  </BrowserRouter>
);

export default hot(module)(BasicRoute);

至此，react框架的開發環境基本搭建完成了(*￣︶￣)。接下來需要做一些優化、拆分出生產環境需要的配置

項目github地址：https://github.com/kakaoG/react-webpack