【已解决】react-hot-boilerplate中把网络引用的css和js换成本地引用以便于提高加载速度

折腾了：

【未解决】把ReactJS-AdminLTE中的导航栏和标题栏集成到react-hot-boilerplate

之后，该去解决之前就需要解决的问题：

对于html中引用的各种css和js，都是之前网上找到的cdn的地址：

index.html

<!doctype html>

<html>

<head>

<title>Sample App</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.5 –>

<!– Font Awesome –>

<!– Ionicons –>

<!– DataTables –>

<!– Theme style –>

<!– AdminLTE Skins. Choose a skin from the css/skins

folder instead of downloading all of them to reduce the load. –>

<!– link ExtractTextPlugin generated css –>

</head>

</div>

<!– <script src="/adminlte_app.js"></script> –>

<!– <script src="/public/adminlte_app.js"></script> –>

<!– <script src="assets/vendor.bundle.js"></script> –>

<!– <script src="http://localhost:3000/assets/vendor.bundle.js"></script> –>

<!– <script src="http://localhost:3000/vendor.bundle.js"></script> –>

<!– <script src="/vendor.bundle.js"></script> –>

<!– <script src="assets/bundle.js"></script> –>

<!– <script src="http://localhost:3000/assets/bundle.js"></script> –>

<!– <script src="http://localhost:3000/bundle.js"></script> –>

<!– <script src="/public/index.js"></script> –>

<!– <script src="/index.js"></script> –>

</body>

</html>

尤其是：

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.min.js

之类的地址，由于是国外的地址，所以加载速度有时候很慢：

所以需要去换成本地加载。

就像之前的ReactJS-AdminLTE中的一样：

代码改为：

<!doctype html>

<html>

<head>

<title>Sample App</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.7 –>

<!– <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> –>

<!– Font Awesome –>

<!– <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> –>

<!– Ionicons –>

<!– <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> –>

<!– DataTables –>

<!– <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.min.css"> –>

<!– Theme style –>

<!– <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css"> –>

<!– AdminLTE Skins. Choose a skin from the css/skins

folder instead of downloading all of them to reduce the load. –>

<!– <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css"> –>

<!– link ExtractTextPlugin generated css –>

</head>

</div>

<!– <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> –>

<!– <script src="/adminlte_app.js"></script> –>

<!– <script src="/public/adminlte_app.js"></script> –>

<!– <script src="assets/vendor.bundle.js"></script> –>

<!– <script src="http://localhost:3000/assets/vendor.bundle.js"></script> –>

<!– <script src="http://localhost:3000/vendor.bundle.js"></script> –>

<!– <script src="/vendor.bundle.js"></script> –>

<!– <script src="assets/bundle.js"></script> –>

<!– <script src="http://localhost:3000/assets/bundle.js"></script> –>

<!– <script src="http://localhost:3000/bundle.js"></script> –>

<!– <script src="/public/index.js"></script> –>

<!– <script src="/index.js"></script> –>

<!– <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script> –>

<!– <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.min.js"></script> –>

</body>

</html>

对应文件，也通过npm run build，都拷贝到对应的输出的文件夹了：

结果npm run dev去通过webpack-dev-server调试，结果无法加载：

不过，如果是直接加载本地html，则是可以找到对应的css和js的（虽然个别有问题）

webpack-dev-server 无法加载css

webpack-dev-server not load local css js

Serving static assets in webpack dev server – Stack Overflow

webpack dev server cannot serve files in `contentBase` directory · Issue #362 · webpack/webpack-dev-server

此处出错的原因，自己也带改知道：

webpack-dev-server是从内存中加载的文件的

目前的可能的解决方案是：

把html中引入的文件，都改为：

加上此处的前缀

http://localhost:4000/adminlte/

然后就可以了？

即使可以，也还是太麻烦啊。。。

此处是已经设置了：

devServer: {

// hot: true,

contentBase: path.resolve(__dirname, ‘build’),

publicPath: path.resolve(__dirname, ‘/adminlte/’),

// publicPath: path.resolve(__dirname, ‘/devServerPublicPath/’),

compress: true,

// port: 3000,

port: 4000,

historyApiFallback: true

webpack-dev-server static css js

找不到解决办法。

去搜：

webpack-dev-server

开发中 Server(DevServer)

去加上：

proxy: {

‘*’ : `http://localhost:${wdsListenPort}` // <– Proxy everthing!

}

试试效果。

结果会导致：

[HPM] Error occurred while trying to proxy request /adminlte/ from localhost:4000 to http://localhost:4000 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Error occured while trying to proxy to: localhost:4000/adminlte/

GET http://localhost:4000/adminlte/ 504 (Gateway Timeout)