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