代碼倉庫地址：webpack+react+redux+es6
最開始拿已經(jīng)寫好的配置來給大家講解厕氨，部分代碼侠姑，沒做解釋，在后期的嘗試中有些朋友會(huì)遇見坑弟翘，先給大家講兩個(gè)坑吧虫腋，如有其他的，歡迎交流探討
坑一 ：
- 描述： 當(dāng)開發(fā)模式換為
production時(shí),即下方命令時(shí)稀余，控制臺(tái)輸入npm start會(huì)在瀏覽器上顯示報(bào)錯(cuò)信息
//package.json 更改了dev的--mode development為 --mode production
"scripts": {
"start": "npm run dev",
"dev": "webpack-dev-server --mode production --config webpack.dev.config.js --open ",
//...
}
報(bào)錯(cuò)為
Failed to compile.
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (963 KiB)
- 解決辦法：在配置文件
webpack.dev.config.js中加入如下配置：
performance: {
hints:false
}
坑二：
- 描述：配置好了如下圖片的loader但是不能在瀏覽器上正確顯示悦冀，除非使用
require（'路徑'）的格式講圖片加載獲取到
// webpack.dev.config.js
{
test: /\.(jpg|png|gif|svg)$/,
use :{
loader: "url-loader",
options: {
limit: 8192,
name: "[name].[ext]"
}
}
}
- 解決辦法：打開瀏覽器控制臺(tái)可以發(fā)現(xiàn)，原來資源文件并沒有被打包到項(xiàng)目的構(gòu)建目錄中睛琳，因此使用插件
copy-webpack-plugin盒蟆，將本地資源文件copy到構(gòu)建目錄中去
- 安裝依賴
npm i -D copy-webpack-plugin
- 配置
webpack.dev.config.js
// webpack.dev.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin"); //請(qǐng)求依賴
//省略其他配置
//...
plugins:[
//...
new CopyWebpackPlugin([
{
from:__dirname+"/images", //定義要拷貝的源目錄
to:__dirname+"/static/images", //定義要拷貝到的目標(biāo)目錄
force: true //強(qiáng)制覆蓋先前的插件
}
]),
],
